0Pricing
CSS Academy · Lektion

Z-Index und Stacking Context

Steuern Sie mit z-index, welche Elemente oben erscheinen, und verstehen Sie Stacking Contexts.

Z-Index und Stacking Context ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist z-index?

z-index steuert die Stap Reihenfolge positionierter Elemente entlang der Z-Achse (von vorne nach hinten). Höhere Werte werden bei einer Überlappung über niedrigeren Werten angezeigt.

z-index funktioniert nur bei positionierten Elementen

z-index hat bei Elementen mit position: static (dem Standardwert) keine Wirkung. Damit z-index angewendet wird, müssen Sie relative, absolute, fixed oder sticky verwenden.

<div class="popup">Popup (position + z-index)</div>

Standard-Stapelreihenfolge

Ohne expliziten z-index werden Elemente in dieser Reihenfolge gestapelt (von hinten nach vorne):

  1. Hintergrund des Root-Elements
  2. Elemente auf Blockebene (in der Reihenfolge ihres Flusses)
  3. Gefloatete Elemente
  4. Inline-Elemente
  5. Positionierte Elemente mit z-index: auto oder 0

Stapelkontext

Ein Stapelkontext ist eine Ebene von Elementen mit einer gemeinsamen z-Achse. z-index-Werte konkurrieren nur innerhalb desselben Stapelkontexts. Ein Element innerhalb eines Stapelkontexts kann unabhängig vom z-index-Wert nicht über Elementen außerhalb dieses Kontexts platziert werden.

Was erzeugt einen Stapelkontext?

Ein neuer Stapelkontext wird erzeugt durch:

  • position + z-index ungleich auto
  • opacity kleiner als 1
  • angewendetes transform, filter oder perspective
  • will-change für bestimmte Eigenschaften
  • isolation: isolate
  • Flex-/Grid-Kindelemente mit z-index

Isolierung von Stapelkontexten

Verwenden Sie isolation: isolate, um absichtlich einen Stapelkontext zu erzeugen, ohne visuelle Nebenwirkungen zu verursachen. Das ist nützlich für UI-Komponenten, die ihre eigenen z-index-Ebenen kapseln müssen.

<div class="modal-wrapper">Isolated stacking context</div>

Das Problem mit der z-index-Skala

In Projekten kommt es häufig zu „z-index-Kriegen“, bei denen Entwickler die Werte immer weiter auf 9999 oder 99999 erhöhen. Lösen Sie dieses Problem mit einer benannten z-index-Skala unter Verwendung von CSS-Variablen:

<p>Custom properties define a z-index scale used across the app.</p>

Negativer z-index

Negative z-index-Werte platzieren Elemente hinter dem Hintergrund des umschließenden Blocks. So können Sie dekorative Pseudo-Element-Ebenen hinter dem Inhalt platzieren.

<div class="card">Card with a decorative gradient layer behind it</div>

Stapelprobleme debuggen

Wenn ein Modal oder Tooltip hinter einem anderen Element erscheint, ist meist ein Stapelkontext eines übergeordneten Elements mit einem niedrigen z-index die Ursache. Verwenden Sie die 3D-Ansicht der DevTools oder überprüfen Sie opacity, transform und filter der übergeordneten Elemente.

z-index in Flexbox und Grid

Flex- und Grid-Elemente können z-index direkt verwenden, ohne position explizit zu setzen. Der Browser behandelt sie für die Stapelung wie positionierte Elemente.

<div class="grid"><div class="grid-item demo-hover">1</div><div class="grid-item">2</div><div class="grid-item">3</div></div>

Fixierte Modals und z-index

Modals sollten direkte Kindelemente von <body> (oder eines Wrappers auf oberster Ebene) sein, damit sie den Stapelkontexten übergeordneter Elemente entkommen. Das HTML-Element <dialog> übernimmt dies im Browser nativ in der obersten Ebene.

Kurzer Test

Zwei überlappende Elemente haben in unterschiedlichen übergeordneten Stapelkontexten jeweils z-index: 100. Was bestimmt, welches Element oben erscheint?

Zusammenfassung

z-index steuert die Stapelreihenfolge positionierter Elemente von vorne nach hinten. Stapelkontexte isolieren die z-index-Konkurrenz. Alles, was bei einem übergeordneten Element einen Stapelkontext erzeugt, kann die z-index-Werte seiner Kindelemente einschließen. Verwenden Sie isolation: isolate, um explizite Grenzen zu schaffen, und CSS-Variablen für eine z-index-Skala.

Häufig gestellte Fragen

Ist die Lektion „Z-Index und Stacking Context“ kostenlos?

Ja — der vollständige Text von „Z-Index und Stacking Context“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Z-Index und Stacking Context“?

Steuern Sie mit z-index, welche Elemente oben erscheinen, und verstehen Sie Stacking Contexts. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Z-Index und Stacking Context“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Statische und relative Positionierung
  2. Absolute Positionierung und Containing Block
  3. Fixierte und sticky Positionierung
  4. Z-Index und Stacking Context
← Zurück zu CSS Academy