Home/ Questions/Q 6965365
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T16:03:10+00:00

I don’t understand why a div with float right or left is not above

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0