FLICKER FLICKER - 1 month ago 4
CSS Question

DIV is covered by previous DIV

I have below simple html

<body>
<div style="position:fixed;width:100%;top:0;left:0;height:45px; background-color:silver">
top
</div>

<div style="width:600px;background-color:yellow;margin:auto">
bottom
</div>
</body>


when I run the page in browser, the silver DIV covers the yellow one. I want to see the yellow one, right below the silver. How should I change it?

Answer

Since a position: fixed element is taken out of flow, other element will position themselves as if the position: fixed weren't there, so i your case your second need a margin equal to the height of the first

<body>
    <div style="position:fixed;width:100%;top:0;left:0;height:45px; background-color:silver">
        top
    </div>

    <div style="width:600px;background-color:yellow;margin: 45px auto 0 auto">
        bottom
    </div>
</body>