Warum beeinflusst der Clip-Pfad die Stapelreihenfolge der Elemente?

Warum sich die Stapelreihenfolge mit Clip-Pfad ändert

Wenn auf ein Element Clip-Pfad angewendet wird, wird ein neuer Stapelkontext erstellt, ähnlich wie sich die Deckkraft auf die Stapelreihenfolge auswirkt Werte kleiner als 1. Dies ist in der CSS-Spezifikation angegeben, in der es heißt: „Ein berechneter Wert, der nicht gleich keiner ist, führt auf die gleiche Weise zur Erstellung eines Stapelkontexts das Die CSS-Deckkraft gilt für andere Werte als 1."

Die Stapelreihenfolge wird beim Malen festgelegt. Die folgenden Schritte werden der Reihe nach ausgeführt:

1. Elemente mit einer Position, einer Deckkraft kleiner als 1 oder einer anderen Transformation als „Keine“ erstellen einen neuen Stapelkontext.
2. Positionierte Nachkommen mit Z-Index: automatisch oder z-index: 0 werden im übergeordneten Stapelkontext platziert.
3. Im Fluss befindliche, nicht positionierte Nachkommen werden im übergeordneten Stapel platziert context.

Im bereitgestellten Beispiel wird das Element mit Clip-Pfad in Schritt 1 gezeichnet und erstellt einen neuen Stapelkontext. Das Bildelement, für das keine Position festgelegt ist, wird in Schritt 3 nach dem durch das Clip-Pfad-Element erstellten Stapelkontext gezeichnet.

Aus diesem Grund erscheint das Bild unter der Kopfzeile, obwohl es erscheint später im DOM-Code.

Lösung:

Um dieses Problem zu beheben, können Sie position: relative für das Bildelement festlegen. Dadurch wird es relativ zu seiner normalen Position positioniert und daher in den Stapelkontext eingefügt, der durch das Clip-Path-Element in Schritt 1 erstellt wurde. Als Ergebnis erscheint das Bild über dem Header-Element.

Beispiel für Opazität:

Das gleiche Verhalten kann bei Opazität beobachtet werden. Wenn das Header-Element eine Deckkraft von weniger als 1 hat, wird auch ein neuer Stapelkontext erstellt und das Bild wird darunter ohne Positionseigenschaft angezeigt.

Das obige ist der detaillierte Inhalt vonWarum beeinflusst der Clip-Pfad die Stapelreihenfolge der Elemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!