z-index

Zuletzt aktualisiert am 15. Februar 2026

z-index bestimmt die Stapelreihenfolge von Elementen auf der z-Achse (die Achse, die “aus dem Bildschirm heraus” zeigt). Elemente mit einem höheren z-index werden über Elementen mit einem niedrigeren Wert dargestellt. Die Eigenschaft funktioniert nur bei positionierten Elementen (relative, absolute, fixed, sticky) sowie bei Flex- und Grid-Items. Um z-index richtig einzusetzen, musst du das Konzept der Stacking Contexts verstehen.

Grundlagen

Ohne z-index werden Elemente in der Reihenfolge gestapelt, in der sie im HTML erscheinen: Spätere Elemente liegen über früheren. Das reicht oft aus, aber sobald Elemente sich überlappen (z.B. durch position: absolute), brauchst du z-index, um die Reihenfolge gezielt zu steuern.

Ein Stacking Context ist ein dreidimensionaler Kontext, in dem Elemente gestapelt werden. Innerhalb eines Stacking Context werden alle Kinder unabhängig vom Rest der Seite sortiert. Ein Kind kann mit noch so hohem z-index nicht über ein Element springen, das in einem höheren Stacking Context liegt.

Folgende Eigenschaften erzeugen einen neuen Stacking Context:

• position: relative/absolute/fixed/sticky zusammen mit einem z-index Wert ungleich auto
• position: fixed oder position: sticky (immer)
• opacity kleiner als 1
• transform, filter, backdrop-filter mit einem Wert ungleich none
• Flex- und Grid-Items mit einem z-index Wert ungleich auto
• isolation: isolate

Syntax & Werte

Beispiele

Einfache z-index Überlappung

Drei farbige Boxen überlappen sich. Der z-index bestimmt, welche Box oben liegt. Ohne z-index würde die letzte Box (Grün) ganz oben liegen.

.blue  { position: absolute; z-index: 3; } /* Ganz oben */
.green { position: absolute; z-index: 2; } /* Mitte */
.red   { position: absolute; z-index: 1; } /* Ganz unten */

<div class="demo">
<div class="stack-container">
  <div class="stack-box box-blue">z-index: 3</div>
  <div class="stack-box box-red">z-index: 1</div>
  <div class="stack-box box-green">z-index: 2</div>
</div>
</div>

Stacking Context: Kind kann Elternteil nicht überspringen

Hier hat die rote Box einen z-index von 1 und die blaue Box einen z-index von 2. Das Kind der roten Box hat z-index: 999, liegt aber trotzdem unter der blauen Box, weil es im Stacking Context seines Elternteils gefangen ist.

.parent-red {
  position: absolute;
  z-index: 1; /* Eigener Stacking Context */
}

.child-yellow {
  position: absolute;
  z-index: 999; /* Hilft nichts! */
  /* Gefangen im Context von .parent-red */
}

.parent-blue {
  position: absolute;
  z-index: 2; /* Liegt über .parent-red und allen Kindern */
}

<div class="demo">
<div class="context-container">
  <div class="parent-red">
    Rot (z-index: 1)
    <div class="child-yellow">Kind (z-index: 999)</div>
  </div>
  <div class="parent-blue">Blau (z-index: 2)</div>
</div>
</div>

Negativer z-index

Mit negativem z-index kannst du ein Element hinter seinen Elternteil schieben. Das funktioniert, wenn der Elternteil keinen eigenen Stacking Context hat (also kein z-index gesetzt hat).

.container {
  position: relative;
  /* Kein z-index gesetzt! */
}

.behind {
  position: absolute;
  z-index: -1; /* Hinter dem Container */
  top: -10px;
}

<div class="demo">
<div class="neg-container">
  <div class="behind">z-index: -1 (hinter dem Container)</div>
  <strong>Container ohne z-index</strong>
</div>
</div>

Praxis: Dropdown-Menü über Inhalten

Ein typischer Anwendungsfall: Ein Dropdown-Menü soll über den restlichen Seiteninhalt schweben.

.navbar {
  position: relative;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

<div class="demo">
<div class="nav-bar">
  <div class="nav-item nav-item-active">Produkte</div>
  <div class="nav-item">Blog</div>
  <div class="nav-item">Kontakt</div>
  <div class="dropdown">
    <div class="dropdown-item">Web-Apps</div>
    <div class="dropdown-item">Mobile Apps</div>
    <div class="dropdown-item">APIs</div>
  </div>
</div>
<div class="page-content">
  Dieser Inhalt liegt unter dem Dropdown-Menü (z-index: 10).
</div>
</div>

Barrierefreiheit

Die Stapelreihenfolge mit z-index hat keinen Einfluss auf die Tab-Reihenfolge. Ein Element mit z-index: 1 (visuell unten) kann vor einem Element mit z-index: 100 (visuell oben) fokussiert werden, wenn es im DOM früher steht. Das kann sehr verwirrend sein.

Typisches Problem: Modals und Overlays: Wenn du ein Modal mit z-index: 100 über die Seite legst, können Tastaturnutzer trotzdem zu den darunterliegenden Elementen tabben, wenn der Fokus nicht eingegrenzt wird. Das ist keine Einschränkung von z-index, sondern erfordert Focus Management in JavaScript.

Lösungen:

• Focus Trapping: Verwende ein Script, das den Fokus innerhalb des Modals hält und verhindert, dass die Tab-Taste zu Hintergrund-Elementen springt.
• inert Attribut: Setze inert auf den Hintergrund-Container, wenn das Modal geöffnet ist. Das macht alle Hintergrund-Elemente unfokussierbar.
• aria-modal="true": Informiert Screenreader, dass es sich um ein Modal handelt.

Covered-Elemente können fokussiert werden: Ein Link, der visuell hinter einem Overlay mit hohem z-index liegt, kann trotzdem mit der Tastatur fokussiert werden. Der Nutzer sieht den Fokus nicht, aber der Link ist aktivierbar. Das ist verwirrend und frustrierend. Verwende inert oder visibility: hidden für überlagerte Bereiche.

Häufige Fehler

• z-index ohne position: Bei position: static (dem Standard) hat z-index keine Wirkung. Du musst position: relative, absolute, fixed oder sticky setzen. Ausnahme: Flex- und Grid-Items akzeptieren z-index auch ohne explizite position.
• z-index-Krieg (1000, 9999, 999999): Wenn du immer höhere Werte brauchst, stimmt etwas mit der Architektur nicht. Definiere eine z-index-Skala (z.B. Dropdown: 10, Modal: 20, Toast: 30) und halte dich daran. Willkürliche hohe Werte machen den Code unwartbar.
• Stacking Context nicht verstanden: Das häufigste z-index-Problem. Ein Kind-Element kann nie über ein Element springen, das in einem höheren Stacking Context liegt. Die Lösung: Überprüfe, welche Vorfahren einen Stacking Context erzeugen (z.B. durch opacity, transform oder z-index).
• z-index auf Flex/Grid-Items: Flex- und Grid-Items akzeptieren z-index auch ohne position. Das überrascht viele Entwickler, weil es eine Ausnahme von der normalen Regel ist. Es funktioniert, weil Flex- und Grid-Items automatisch einen Stacking Context erzeugen, wenn z-index ungleich auto ist.
• Negativer z-index verschwindet hinter body: Ein Element mit z-index: -1 kann hinter den body-Hintergrund rutschen und unsichtbar werden. Das passiert, wenn das <html> oder <body> Element einen Stacking Context hat. Setze den Hintergrund auf den richtigen Container oder verwende isolation: isolate auf dem Elternelement.
• z-index auf nicht überlappende Elemente setzen: Wenn sich Elemente gar nicht überlappen, hat z-index keine sichtbare Wirkung. Überprüfe zuerst, ob die Elemente sich tatsächlich überlagern, bevor du mit z-index-Werten experimentierst.

Browser-Kompatibilität

z-index wird seit Jahrzehnten von allen Browsern vollständig unterstützt. Das Stacking-Context-Verhalten ist in allen modernen Browsern konsistent.

Email-Kompatibilität

z-index wird in HTML-Emails kaum unterstützt, da die meisten Clients position entfernen und damit auch z-index wirkungslos ist.

Verwandte Eigenschaften