I have a
div just before the
</body> tag of the document (before the document ends).
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?
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.
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 :)
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.
I was playing with this in jsfiddle--It was actually acting weird... but it was definitely close to working. I was using a
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...
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
// 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").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").insertBefore( document.getElementById("mydiv"), document.getElementsByTagName("body").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.
©2020 All rights reserved.