Warum bewegt sich ein fester Header mit einem nicht positionierten Geschwister?

Verstehen des Verhaltens fester Elemente: Warum ein fester Header mit einem nicht positionierten Geschwister verschoben wird

Feste Positionierung in CSS platziert ein Element in einem festen Position relativ zum Ansichtsfenster. Es ist jedoch wichtig zu verstehen, dass der Ansichtsbereich auf der Grundlage von Elementen im normalen Dokumentfluss berechnet wird.

Im bereitgestellten HTML ist das Header-Element fixiert, während auf das Hauptelement ein Rand oben angewendet wird. Wenn diese Elemente im Dokument platziert werden, geschieht Folgendes:

1. Fester Header: Das Header-Element mit der Position: Fixed wird aus dem Dokumentfluss entfernt und am platziert oben im Ansichtsfenster.
2. Berechnung des Dokumentenflusses: Die übrigen Elemente, beginnend mit dem Hauptelement, legen den Dokumentenfluss fest. Der auf das Hauptelement angewendete Rand oben: 90 Pixel gibt den vertikalen Abstand zwischen der Kopfzeile und dem Hauptinhalt an.
3. Ansichtsfensterberechnung: Das Ansichtsfenster wird basierend auf den Elementen im Dokumentfluss berechnet . Da das erste Inflow-Element das Hauptelement mit einem oberen Rand von 90 Pixeln ist, beginnt das Ansichtsfenster an diesem Punkt.
4. Randkollabierung: Das Körperelement, das übergeordnete Element von main, hat einen Standardrand von 8 Pixel. Aufgrund des Reduzierens des CSS-Rands wird der obere Rand des Hauptteils (90 Pixel) mit dem oberen Rand des Hauptteils (8 Pixel) zusammengelegt, was zu einem kombinierten Rand von 98 Pixeln führt.

Infolgedessen beides Das Hauptelement und der Header werden um 98 Pixel nach unten verschoben, obwohl der Header fest im Ansichtsfenster verankert ist. Dies liegt daran, dass das Ansichtsfenster selbst basierend auf den reduzierten Rändern innerhalb des Dokumentflusses angepasst wird.

Daher ist es wichtig zu berücksichtigen, dass feste Elemente zwar relativ zum Ansichtsfenster positioniert werden, die Position des Ansichtsfensters jedoch durch die darin enthaltenen Elemente bestimmt wird den regulären Dokumentenfluss. Dieses Verständnis erklärt, warum sich ein fester Header zusammen mit einem nicht positionierten Geschwisterelement bewegen kann.

Das obige ist der detaillierte Inhalt vonWarum bewegt sich ein fester Header mit einem nicht positionierten Geschwister?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!