Why Does My Fixed Header Push Down My Content, and How Can I Fix It?

Fixed header pushes down content

In my header I put the title of the page and my navbar, but as soon as I set it position:fixed; the margin on the top increased. Here is the link to Codepen:

You are facing a margin collapsing issue. After making the header fixed, you removed it from the flow and your form become the first in-flow element thus its top margin will collpase with the top margin of the body¹. This mean that the body will have a big top margin and your fixed element will be positioned considering the body since you didn't set any top value².

To avoid this you simply need to disable margin-collapsing (which I recommend in order to avoid other issues) or set top value to move the element where you want.

body {
 padding-top:1px; /*disable margin-collpasing*/
}

#header{
    background-color:#191919;
    height:3rem;
    width:100%;
    position:fixed;
    top:0px; /*Add a top value to place it*/
}

¹ [this margin doesn't appear because the body doesn't have margin set, it's the space between the element and the body ](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-collapse)

² [Read more about how this works in this article.](https://css-tricks.com/couple-margin-collapsing-gotchas/)

The above is the detailed content of Why Does My Fixed Header Push Down My Content, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!