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

Kopfzeile bewegt sich nach unten, wenn ich sie korrigiert habe

Hier tritt ein Problem auf, das als Randkollaps bekannt ist. Als Sie die Kopfzeile „position:fixed“ festgelegt haben, wurde sie aus dem normalen Fluss des Dokuments entfernt, sodass der obere Rand des folgenden Elements (in diesem Fall das Formular) mit dem oberen Rand des Hauptteils zusammenfällt. Dies ist das Standardverhalten von HTML.

Um dieses Problem zu vermeiden und den vertikalen Abstand zwischen der Kopfzeile und dem Formular beizubehalten, haben Sie zwei Möglichkeiten:

1. Deaktivieren Margin Collapsing:

   Padding-top hinzufügen: 1px; in den Text Ihres CSS einfügen, um zu verhindern, dass der Rand zusammenbricht. Durch diese geringe Polsterung wird die Faltung effektiv unterbrochen und der Rand des Formulars kann wirksam werden.

2. Oberen Rand festlegen:

   Oben hinzufügen : [gewünschter Wert]; zum CSS für Ihren Header, um dessen vertikale Position relativ zum oberen Rand des Ansichtsfensters explizit festzulegen. Dadurch wird der reduzierte Rand überschrieben und sichergestellt, dass Ihre Kopfzeile an der gewünschten Position bleibt.

Aktualisierter Code (Option 1):

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

Aktualisierter Code (Option 2):

#header {
  top: 3rem; /* desired vertical position */
}

Hinweis:

Wenn Sie ein Framework wie Bootstrap oder Materialise CSS verwenden, sind möglicherweise bereits Regeln für die Handhabung vorhanden Marge kollabiert. In diesem Fall müssen Sie diese Regeln möglicherweise außer Kraft setzen oder alternative Ansätze verwenden, um die gewünschte Positionierung zu erreichen.

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