Home/ Questions/Q 7436175
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T10:11:49+00:00

<html> <body> <div class=fixed-top-bar style=position:fixed></div> <div class=content style=position:static></div> </body> </html> In my browser, both

  • 0
<html>
    <body>
        <div class="fixed-top-bar" style="position:fixed"></div>
        <div class="content" style="position:static"></div>
    </body>
</html>

In my browser, both div starts from top left of the browser.

In firebug, I set both div with “display: block” so each div element should take a row of space.
Why do I see them stacked on the top left? How can I make it look normal?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When applying position: fixed, the element gets pulled out of the natural flow of the page. This causes all other elements to ignore that elements position. That’s why the static div lies below the fixed div.

    The fixed div‘s position relates to the parent element which in this case is body. Since you didn’t give it any left top right bottom position data, it just behaves like top: 0; left: 0; which happens to be the exact same postion where your static div lies below.

    To resolve this, I’d simply add the same amount of padding-top to the body as the fixed div is high.

    You can read more about this here: https://developer.mozilla.org/en/CSS/position

    By the way, a div naturally behaves as if you’d give it display: block. In fact, that’s its only default styling.

    • 0