Warum bewegt sich ein fester Header, wenn seine Geschwister dies tun?

Feste Header-Motilität: Das Rätsel lösen

Frage:

Warum funktioniert ein Element mit Position trotz seiner vermeintlichen Unbeweglichkeit? : feste Verschiebung neben nicht positionierten Geschwistern?

Antwort:

Während feste Elemente im Browserfenster verankert erscheinen, wird ihre Positionierung relativ zum Ansichtsfenster berechnet umfasst Elemente innerhalb des Dokumentenflusses. Da das erste Element im Dokumentenfluss in diesem Fall das Nicht-Header-Div ist, wird der Ansichtsbereich bestimmt, nachdem das Attribut „margin-top“ angewendet wurde.

Daher gilt, wenn „margin-top: 90px“ auf das Nicht-Header-Attribut angewendet wird. header div:

1. Der Standardrand des Körperelements (8 Pixel) wird mit dem oberen Rand des Hauptelements (90 Pixel) zusammengelegt.
2. Beide Elemente werden um 90 Pixel nach unten verschoben, einschließlich das Kopfzeilenelement mit der Position: fest.
3. Das liegt daran, dass das Ansichtsfenster von der Oberseite des Körperelements aus berechnet wird, nicht vom festen Element.

Schlussfolgerung:

Feste Elemente werden, obwohl sie aus dem Dokumentenfluss entfernt wurden, immer noch von der Positionierung der Elemente innerhalb dieses Flusses beeinflusst. Das Verständnis dieser Beziehung ist entscheidend für das genaue Layout und die Positionierung auf Webseiten.

Das obige ist der detaillierte Inhalt vonWarum bewegt sich ein fester Header, wenn seine Geschwister dies tun?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!