Say I have this html code:
<html>
<body>
<div id="Div1" style="position:relative">
<span style="position:absolute;top:100px">My text</span>
</div>
<div id="Div2">
Test
</div>
</body>
</html>
What should I do to make Div2 always below Div1 regardless of the content of Div1? Because the span uses position:absolute in Div1, the content of Div2 appears above the content of Div1.
Jeff: div is as standard block elements, so that wont make any difference.
You could try:
<div id="Div1" style="position:relative; display:inline-block">
<span style="position:absolute;top:100px">My text</span>
</div>
<div id="Div2">
Test
</div>
Why not do this ?
<div id="Div1" style="margin-top:100px">
<span>My text</span>
</div>
<div id="Div2">
Test
</div>
I don't quite get why you are doing it that way. Could you explain a bit more what you're trying to do? I'm sure there's a better way
do you want div2 below div1 or at the very bottom of the page? if you want it below div1 then add
clear:both;
to div2.
if you want it fixed to the bottom of the page then use a fixed position property on the div2
The reason div2 displays above div1 is because div2 is absolutely positioned. That means that div1 doesn't participate in the normal document flow, as if it was pulled out of the document. So, div2 shows up at the top, then your absolute positioning pushes div1 down to 100px.
Take the absolute positioning off of div1, then use margins or padding to move it down to the desired location. That way, the normal html rendering will place div2 below div1.
If you're forced to absolutely position div1, then you need to absolutely position div2 as well. You may need to use javascript to figure out the height of div1 and set the top of div2 appropriately.
<html>
<body>
<div id="Div1" style="position:absolute; top: 100px;">
<span>My text</span>
</div>
<div id="Div2" style="position:absolute; top: 130px;">
Test
</div>
</body>
</html>
Maybe something like this?
<html>
<body>
<div id="Div1" style="position:relative">
<div style="position:absolute;top:0">just some text<br />very long text<br />very long text<br />very long text<div id="Div2" style="margin-top:30px">div thats always below(30px's below)</div></div>
</div>
</body>
</html>
Others have answered this question correctly about position:relative vs. position:absolute and page flow in the container div.
Just to add to the answer. I found the following tutorial really helpful when I was learning about positioning in CSS.