Wie scheint sich „position:relative;' auf den Z-Index auszuwirken?

Verstehen der Auswirkungen von position:relative; auf den Z-Index

In bestimmten Szenarien wird die Verwendung von „position: relativ;" auf ein Element scheint seinen Z-Index zu ändern, was zu Verwirrung führt. Diese Antwort zielt darauf ab, dieses Verhalten zu verdeutlichen, indem auf die Spezifikation der CSS-Malreihenfolge verwiesen wird.

CSS-Malreihenfolge

Die CSS-Malreihenfolge bestimmt die Reihenfolge, in der HTML-Elemente gemalt werden auf den Bildschirm. Für nicht positionierte Elemente (d. h. ohne die Einstellung „position:absolute;“ oder „position:relative;“) werden sie in der Reihenfolge des HTML-Markups gezeichnet (Schritt 4). Allerdings werden positionierte Elemente (z. B. .mask im bereitgestellten Codebeispiel) später nach allen nicht positionierten Elementen gezeichnet (Schritt 8).

Relative Positionierungsauswirkungen

Wenn position:relative; auf ein Element (z. B. .container) angewendet wird, wird es relativ zu seinem normalen Fluss positioniert. Folglich wird es aus der Schritt 4 Malreihenfolge entfernt und fällt stattdessen unter Schritt 8 mit anderen positionierten Elementen.

Im angegebenen Code wird .mask eingezeichnet Schritt 8 (da es absolut positioniert ist), während .container (ohne position:relative;) in Schritt gezeichnet würde 4. Somit erscheint .mask wie erwartet vor .container.

Wenn jedoch position:relative; auf .container angewendet wird, fällt es auch unter die Malreihenfolge Schritt 8. Da sowohl .mask als auch .container positioniert sind und keinen angegebenen Z-Index haben, wird das Element, das später im Dokument erscheint (d. h. .container), über das andere Element (d. h. .mask) gemalt.

Fazit

Wenn man die CSS-Malreihenfolge versteht, wird klar, warum die Einstellung position:relative; auf einem Containerelement kann sich scheinbar auf dessen Z-Index auswirken. Dieses Verhalten ist darauf zurückzuführen, dass das Element später im Renderprozess positioniert und somit gezeichnet wird, was zu einer Änderung der visuellen Reihenfolge im Verhältnis zu anderen positionierten Elementen führt.

Das obige ist der detaillierte Inhalt vonWie scheint sich „position:relative;' auf den Z-Index auszuwirken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!