suchen

Heim >Web-Frontend >CSS-Tutorial >Wie steuert CSS Z-Index die Stapelreihenfolge von HTML-Elementen?

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-25 03:47:11129Durchsuche

How Does CSS z-index Control the Stacking Order of HTML Elements?

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!

css less html Static using Property position Other
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie kann ich eine Sticky-Fußzeile erstellen, die am Ende der Seite oder im Inhalt verbleibt, je nachdem, was darunter liegt?Nächster Artikel：Wie kann ich eine Sticky-Fußzeile erstellen, die am Ende der Seite oder im Inhalt verbleibt, je nachdem, was darunter liegt?

In Verbindung stehende Artikel

Mehr sehen