Menu
I don't understand why a div with float right or left is not above a div with relative position or defined with a background color when the last one is declared after.
Here is the html:
<html>
<body>
<div class="container">
Main container <br/><br/>
<div class="header">This is the header</div>
<div class="text-right">Right text</div>
<div class="footer">This is the footer</div>
</div>
</body>
And here is the css:
.header {
background-color:blue;
border: solid;
color: white;
border-color:black;
height: 100px;
}
.text-right{
float: right;
border: solid;
background-color: green;
}
.container{
padding: 10px;
border: solid;
}
.footer{
padding-top: 50px;
border: solid;
background-color: yellow;
position: relative;
}
I know that I can use a .clear: both rule to correct this problem but my main point is: why when I set the background-color or the position or both in the .footer rule, the float div is under the footer?
Thank you very much!
736
While reading this very good post, at the end of the post, the author talks about the z-order internal working but also say that if you want to learn more, this next one will be a much more detailed article
The key point is that the order in the z-axis where are put the elements.
Here is what the author says:
If we do not specify any z-index values, the default stacking order from closest to the user to furthest back is as follows:
1. Positioned elements, in order of appearance in source code 2. Inline elements 3. Non-positioned floating elements, in order of appearance in source code 4. All non-positioned, non-floating, block elements in order of source code 5. Root element backgrounds and borders
As we can see, the positioned elements(1) are always on top of non-positioned elements(3-4). If I put a div with just a float property, this element will not be "positioned" onto the surface.
In this case, the second element, my footer div, that is positioned with a relative property value will be at the top of the previous one not just I don't add a clear: both property after the float div property or because the last one is added after the floating element but because it is positioned!
Like powerbuoy said, you must set add a position relative to the float element to be able to go top of the stack the floating element. But it's not enough. Because these two elements are now at the same level and because they are both crossing each other, you must tell the engine which one will be the first and this is why you must set the z-order to 1 to the floating element again like said powerbuoy.
I'm not a very good writer and for this reason, I strongly suggest you to read the referenced articles that I mentioned previously. I think you will have a very deep explanation of the case.
136
Since the footer comes after the text-right it will be rendered on top of text-right. To avoid this you can give text-right a z-index (and a position other than static):
http://jsfiddle.net/wxMhx/
Edit: hmmm... no that's not entirely correct. If you remove position: relative; from the footer text-right will be rendered on top of it. TBH I'm not sure why that happens. But the solution in either case is to either remove position: relative; from the footer, or add it (as well as a z-index) to text-right.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
