Warum verschiebt mein fester Header meinen Inhalt nach unten und wie kann ich das beheben?

Fester Header verschiebt den Inhalt nach unten

In meinen Header habe ich den Titel der Seite und meine Navigationsleiste eingefügt, aber sobald ich ihn eingestellt habe Position:fest; der Rand oben vergrößerte sich. Hier ist der Link zu Codepen:

Sie stehen vor einem Problem mit dem Margenzusammenbruch. Nachdem Sie den Header fixiert haben, entfernen Sie ihn aus dem Fluss und Ihr Formular wird zum ersten einfließenden Element, sodass sein oberer Rand mit dem oberen Rand des Körpers zusammenfällt¹. Das bedeutet, dass der Körper einen großen oberen Rand hat und Ihr festes Element unter Berücksichtigung des Körpers positioniert wird, da Sie keinen oberen Wert festgelegt haben².

Um dies zu vermeiden, müssen Sie einfach Folgendes tun um die Randreduzierung zu deaktivieren (was ich empfehle, um andere Probleme zu vermeiden) oder legen Sie den Höchstwert fest, um das Element an die gewünschte Stelle zu verschieben wollen.

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

¹ [Dieser Rand erscheint nicht, weil für den Körper kein Rand festgelegt ist, es ist der Raum zwischen dem Element und dem Körper ](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-collapse)

² [Lesen Sie mehr darüber, wie das funktioniert in diesem Artikel.](https://css-tricks.com/pair-margin-collapsing-gotchas/)

Das obige ist der detaillierte Inhalt vonWarum verschiebt mein fester Header meinen Inhalt nach unten und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!