Home >Web Front-end >CSS Tutorial >Why Does My Fixed Header Push Down My Content, and How Can I Fix It?

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-16 15:32:18376browse

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 body1. 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 value2.

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*/
}

1 [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)

2 [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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn