z-index

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.

Steckbrief z-index

Syntax: z-index: auto | <integer>
Initialwert: auto
Vererbt: Nein
Animierbar: Ja

Kategorie: Positionierung
Werte: 2
Beispiele: 4
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 15.02.2026

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

2 Werte

Wert	Beschreibung	Beispiel
`auto`	Element erhält keinen eigenen Stacking Context. Die Stapelreihenfolge entspricht dem Elternelement. (Standard)	z-index: auto
`<integer>`	Ganzzahliger Wert (positiv oder negativ). Höhere Werte liegen weiter oben.	z-index: 10

Beispiele

4 Beispiele

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.

z-index bestimmt die Reihenfolge

.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>

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.

Stacking Context begrenzt z-index

.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>

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).

Negativer z-index

.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>

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

Dropdown mit z-index

.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

6 Fehler

01 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.

02 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.

03 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).

04 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.

05 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.

06 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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

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

Apple Mail

Teilweise

Funktioniert in Kombination mit position: relative/absolute
Gmail

Keine

z-index wird zusammen mit position entfernt
Outlook

Keine

Keine Unterstützung für z-index
Thunderbird

Teilweise

Grundlegende Stapelung funktioniert
Yahoo Mail

Keine

z-index wird ignoriert

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da