Position an element from the end of the document at the top of the page

问题

I have a div just before the </body> tag of the document (before the document ends). And I want to display this div on the top of the page using CSS or JavaScript.

I know about position:absolute;. The problem is that if I use it, the div will show on top of other content that's located in the top, not before this content.

So is there any other way to do this?

回答1:

You can use position:absolute for the div element and then assign a margin-top to body element which equals the possible height of the div.

回答2:

An alternative to Cybernate's answer is to use position:fixed to do this.

This div will then however always be on top even when scrolling. It's great for a "notification" bar but irritating if you use it for the wrong kind of thing :)

回答3:

I don't believe there is a way to drastically reposition an element, while keeping it within the inline flow. As you already mentioned, absolute positioning removes the element from inline flow--thus overlapping other content.

You could however use Jquery to clone the content, and append it somewhere near the top. You could also query the height of the div, and use Jquery to set the body's top margin.

Both of these would allow it to respect the inline flow, but it's not using CSS as your question refers to; if you'd like, I can help with the Jquery.

Edit:

    <script type="text/javascript">
        window.onload = function() {

        document.getElementById("content").style.marginTop = document.getElementById("errorDisplay").offsetHeight + "px";

        }
    </script>

I was playing with this in jsfiddle--It was actually acting weird... but it was definitely close to working. I was using a wrapper and content rather than manipulating the entire body (just a bit safer I think.) Make sure you add the + "px" at the end of the command, otherwise it won't work.

Here's the fiddle...

http://jsfiddle.net/pVn2W/

As you can see, it's pushing the entire wrapper down rather than just the 'content'... using 'content' or 'wrapper' in the first argument doesn't change anything oddly enough.

Not exactly your model, but still an exercise in achieving the same goal--maybe this will get you a step closer :P

回答4:

If using JavaScript is an option you can simply do this:

// For demonstration I am creating a <div id="mydiv">Hello World</div>
// Appending it to <body> means it goes to the very bottom of the body tag
var div = document.createElement("div");
div.id="mydiv";
div.innerHTML = "Hello World";
document.getElementsByTagName("body")[0].appendChild(div);
// In your case I assume that the div is already present inside the HTML source
// just before </body>, So no need to do the above
document.getElementsByTagName("body")[0].insertBefore(
    document.getElementById("mydiv"),
    document.getElementsByTagName("body")[0].firstChild
);

Copy paste the above code in the console for demonstration. If you're using jQuery, the above-mentioned code can be reduced to just one line.

来源：https://stackoverflow.com/questions/4814007/position-an-element-from-the-end-of-the-document-at-the-top-of-the-page

标签

javascript

html

css

xhtml