Wie steuert CSS Z-Index die Stapelreihenfolge von HTML-Elementen?

Grundlegende Informationen zur Z-Index-Stapelreihenfolge

Positionieren von Elementen mit Z-Index

Die Z-Index-Eigenschaft in CSS bestimmt die Stapelreihenfolge positionierter Elemente . Konkret bestimmt es, welche Elemente vor oder hinter anderen auf der Z-Achse erscheinen, die die Tiefe auf einer dreidimensionalen Ebene darstellt.

Auswirkungen auf positionierte Elemente

Z-Index funktioniert nur auf Elementen mit einer anderen als statischen Position (d. h. absolut, relativ, fest oder klebrig). Es wirkt sich nicht auf Elemente mit einer statischen Position oder Elemente aus, die mithilfe von Floats positioniert werden.

Stapelkontexte

Ein Stapelkontext wird erstellt, wenn ein Element positioniert wird und ein Z-Index angewendet wird. Innerhalb eines Stapelkontexts legt die Z-Index-Eigenschaft die Stapelreihenfolge des positionierten Elements und seiner Nachkommen fest. Stapelkontexte verhindern, dass Elemente in einem Kontext die Stapelreihenfolge von Elementen in einem anderen Kontext beeinträchtigen.

Stapelreihenfolgeregeln

Die Stapelreihenfolge von Elementen ohne angegebenen Z-Index ist wie folgt:

1. Hintergründe und Ränder des Wurzelelements
2. Nicht positionierter, nicht schwebender Block Elemente
3. Nicht positionierte schwebende Elemente
4. Inline-Elemente
5. Positionierte Elemente

Wenn eine Z-Index-Eigenschaft angewendet wird, ist die Stapelreihenfolge geändert:

1. Hintergründe und Ränder des Wurzelelements
2. Positioniert Elemente mit einem Z-Index von weniger als 0
3. Nicht positionierte, nicht schwebende Blockelemente
4. Nicht positionierte schwebende Elemente
5. Inline-Elemente
6. Positionierte Elemente mit einem Z-Index von 0
7. Positionierte Elemente mit einem Z-Index größer als 0

Beispiele für die Stapelreihenfolge

Gemischte Geschwister

s mit und ohne Position:

• div.sibling -1 hat Position: statisch und Z-Index: 0
• div.sibling-2 hat Position: absolut und Z-Index: 1

Ergebnis: div.sibling-2 wird vor div.sibling-1 angezeigt, da sein Z-Index höher ist.

Verschachtelte

s mit Geschwistern

s:

• div.container hat Position: statisch und Z-Index: 0

  • div.child-1 hat Position : statisch und Z-Index: 0
  • div.child-2 hat Position: absolut und Z-Index: 1
• div.sibling hat Position: relativ und Z-Index: 2

Ergebnis: div.sibling wird vorne angezeigt der beiden untergeordneten Divs, da es mit einem höheren Z-Index in einem anderen Stapelkontext positioniert ist.

Das obige ist der detaillierte Inhalt vonWie steuert CSS Z-Index die Stapelreihenfolge von HTML-Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!