Warum kann sich ein fest positioniertes Element mit seinen Geschwisterelementen verschieben?

Warum sich ein Element mit fester Position mit seinem Geschwister bewegt

Obwohl ein Element mit „position:fixed“ aus dem Dokumentenfluss entfernt wurde, kann es immer noch sein von seinen Geschwistern beeinflusst. Dies liegt an der Art und Weise, wie das Ansichtsfenster berechnet wird.

Das Ansichtsfenster ist der Bereich innerhalb des Browserfensters, der für den Benutzer sichtbar ist. Es wird anhand der In-Flow-Elemente berechnet, bei denen es sich um die Elemente handelt, die am regulären Dokumentenfluss teilnehmen.

Im bereitgestellten HTML ist das erste In-Flow-Element

, das über einen Rand oben verfügt : 90px. Da der

Element fest ist, wird es bei der Berechnung des Ansichtsfensters nicht berücksichtigt.

Der Standardrand von 8 Pixeln auf dem Das Element wird mit dem Rand auf

reduziert. Dies führt dazu, dass beide Elemente um 90 Pixel nach unten verschoben werden, was sich auf die Position des festen Headers auswirkt.

Um dies zu beheben, fügen Sie einfach top: 0 zum Header-CSS hinzu, um ihn unabhängig davon oben im Ansichtsfenster zu platzieren Ränder der Geschwisterelemente.

Das obige ist der detaillierte Inhalt vonWarum kann sich ein fest positioniertes Element mit seinen Geschwisterelementen verschieben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!