Warum ändert „clip-path' die Stapelreihenfolge der Elemente?

Warum beeinflusst Clip-Path die Stapelreihenfolge?

Bei Anwendung auf ein Element verhält sich Clip-Path ähnlich wie die CSS-Deckkraft mit einem Wert kleiner als 1. Gemäß der CSS-Spezifikation erzeugen solche Eigenschaften einen Stapelkontext, der die Malreihenfolge von beeinflusst Elemente.

Stapelkontextbildung

Ein Stapelkontext ist eine zweidimensionale Ebene, die untergeordnete Elemente enthält, die in einer bestimmten Reihenfolge angeordnet sind. Sobald ein Stapelkontext eingerichtet ist, werden darin enthaltene Elemente in einer Reihenfolge von vorne nach hinten oder von hinten nach vorne gerendert.

Malreihenfolge mit Clip-Pfad

Entsprechend der Malreihenfolge erstellen alle positionierten oder undurchsichtigen Nachkommen (mit einer Undurchsichtigkeit von weniger als 1) atomar neue Stapelkontexte. Dies bedeutet, dass sie ihren eigenen Stapelkontext bilden und vom Rest des Dokuments isoliert werden.

In unserem Beispiel erstellt das Element mit Clip-Pfad im 8. Schritt des Malprozesses einen Stapelkontext. Das Bild im Code ist jedoch nicht positioniert und wird daher als nicht positioniertes Inflow-Element betrachtet. Dies bedeutet, dass es in einem späteren Schritt (4) im Malprozess gemalt wird.

Position:relative und Stapelreihenfolge

Durch Hinzufügen von position:relative zum Bild wird Wir zwingen es im Wesentlichen dazu, seinen eigenen Stapelkontext zu bilden. Dadurch wird sichergestellt, dass das Bild im 8. Schritt zusammen mit der Kopfzeile mit Clip-Pfad gezeichnet wird. Jetzt wird das Bild aufgrund seiner Baumreihenfolge über der Kopfzeile positioniert.

Fazit

Die Auswirkung von Clip-Pfad auf die Stapelreihenfolge von Elementen später im DOM entsteht durch die atomare Erstellung eines Stapelkontexts. Elemente in diesem Kontext werden vor anderen Elementen angezeigt, die als nicht positioniert gelten.

Das obige ist der detaillierte Inhalt vonWarum ändert „clip-path' die Stapelreihenfolge der Elemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!