Ausführbare CSS-Docs: CSS z-index

Q: Funktioniert z-index ohne position?

Nicht an normalen Block- oder Inline-Elementen: position: static ignoriert es. An Flex-Items und Grid-Items funktioniert es ganz ohne position.

Was z-index macht

Wenn sich Elemente überlappen, entscheidet z-index, welches vorn gezeichnet wird. Die höhere Zahl gewinnt. Es wirkt an positionierten Elementen (jede position außer static) und an Flex- und Grid-Items:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>z-index</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .stage { position: relative; height: 170px; }
    .card {
      position: absolute;
      width: 130px; height: 100px; padding: 8px;
      color: white; font-weight: 600; border-radius: 8px;
    }
    .a { background: #2563eb; top: 0; left: 0; z-index: 3; }
    .b { background: #16a34a; top: 30px; left: 60px; z-index: 1; }
    .c { background: #f59e0b; top: 60px; left: 120px; z-index: 2; }
  </style>
</head>
<body>
  <div class="stage">
    <div class="card a" id="a">A z-index: 3</div>
    <div class="card b" id="b">B z-index: 1</div>
    <div class="card c" id="c">C z-index: 2</div>
  </div>
</body>
</html>

Ohne z-index werden spätere Elemente im HTML über frühere gezeichnet, also würde C B verdecken und B A. Die z-index-Werte drehen das um: A liegt vorn, dann C, dann B.

Die Werte

Wert	Bedeutung
`auto` (Standard)	Mit seinen Geschwistern auf Ebene 0 gestapelt, erzeugt keinen Stacking Context
`0`	Ebene 0, erzeugt aber einen Stacking Context
Positive ganze Zahl	Vor niedrigeren Werten
Negative ganze Zahl	Hinter Ebene 0 und hinter dem Inhalt des Elternelements, wenn das Elternelement den Stacking Context bildet

Nur ganze Zahlen sind gültig: z-index: 1.5 wird ignoriert.

Warum z-index 9999 verlieren kann: Stacking Contexts

z-index-Werte werden nicht über die ganze Seite hinweg verglichen. Elemente werden in Stacking Contexts gruppiert, und ein z-index sortiert nur Elemente innerhalb desselben Contexts. Der Context selbst wird dann als eine einzige Ebene platziert, mit dem z-index des Elements, das ihn erzeugt hat.

Unten hat das blaue Dropdown z-index: 9999, liegt aber in einem Header mit z-index: 1. Das grüne Banner, ein Geschwister dieses Headers, hat z-index: 2. Die ganze Header-Ebene, Dropdown inklusive, liegt unter dem Banner:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Stacking context</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .header {
      position: relative;
      z-index: 1;                 /* creates a stacking context */
      height: 40px; padding: 10px; background: #e5e7eb;
    }
    .dropdown {
      position: absolute;
      top: 40px; left: 20px;
      z-index: 9999;              /* only counts inside .header */
      width: 180px; height: 110px; padding: 8px;
      background: #2563eb; color: white;
    }
    .banner {
      position: relative;
      z-index: 2;
      margin-top: 20px; height: 60px; padding: 10px;
      background: #16a34a; color: white;
    }
    .no-context .header { z-index: auto; }
  </style>
</head>
<body>
  <div id="page">
    <div class="header">Header, z-index: 1
      <div class="dropdown" id="dropdown">Dropdown, z-index: 9999</div>
    </div>
    <div class="banner" id="banner">Banner, z-index: 2</div>
  </div>
  <p><button type="button" id="fix">Set the header's z-index to auto</button> <span id="out"></span></p>
  <script>
    const report = () => {
      const r = document.getElementById('banner').getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 60, r.top + 20);
      document.getElementById('out').textContent = 'On top at the overlap: ' + top.id;
    };
    document.getElementById('fix').addEventListener('click', () => {
      document.getElementById('page').classList.toggle('no-context');
      report();
    });
    report();
  </script>
</body>
</html>

Drück den Button. Mit z-index: auto bildet der Header keinen Stacking Context mehr, also wird die 9999 des Dropdowns direkt mit der 2 des Banners verglichen, und das Dropdown kommt nach vorn. Das Dropdown auf 99999 zu setzen, hätte nie geholfen.

Was einen Stacking Context erzeugt

Jede dieser Eigenschaften macht ein Element zu einem eigenen Stacking Context und schließt den z-index von allem darin ein:

Eigenschaft	Bedingung
`position: relative` oder `absolute`	Mit einem `z-index` ungleich `auto`
`position: fixed` oder `sticky`	Immer
Flex- oder Grid-Item	Mit einem `z-index` ungleich `auto`
`opacity`	Unter 1
`transform`, `scale`, `rotate`, `translate`	Jeder Wert außer `none`
`filter`, `backdrop-filter`	Jeder Wert außer `none`
`isolation`	`isolate`
`mix-blend-mode`	Jeder Wert außer `normal`
`will-change`	Wenn eine der Eigenschaften oben genannt wird
`contain`	`layout` oder `paint` (und `strict`, `content`)

Überraschend sind opacity und transform: Fügst du einem Elternelement ein Ausblenden oder eine Hover-Animation hinzu, kann sein Dropdown plötzlich hinter dem nächsten Abschnitt landen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>opacity creates a context</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 0; }
    .col { position: relative; width: 160px; height: 120px; padding: 8px; background: #e5e7eb; }
    .col + .col { background: #fde68a; }
    .tip {
      position: absolute; top: 40px; left: 100px; z-index: 10;
      width: 120px; padding: 8px; background: #2563eb; color: white;
    }
    .faded { opacity: 0.99; }
  </style>
</head>
<body>
  <div class="row">
    <div class="col faded" id="first">opacity: 0.99
      <div class="tip" id="tip">Tooltip z-index: 10</div>
    </div>
    <div class="col" id="second">Next column</div>
  </div>
  <p id="out"></p>
  <script>
    const r = document.getElementById('second').getBoundingClientRect();
    document.getElementById('out').textContent =
      'On top in the overlap: ' + document.elementFromPoint(r.left + 30, r.top + 60).id;
  </script>
</body>
</html>

Der z-index: 10 des Tooltips sollte ihn über die nächste Spalte heben. Aber opacity: 0.99 macht die erste Spalte zu einem Stacking Context mit z-index auto (Ebene 0), und die zweite Spalte kommt später im HTML auf derselben Ebene, also wird sie über die ganze erste Spalte gemalt, Tooltip inklusive. Lösch die Zeile mit opacity, und der Tooltip liegt wieder vorn.

Negativer z-index

Ein negativer z-index legt ein Element hinter seine Geschwister. Bildet das Elternelement keinen Stacking Context, kann es sogar hinter den Hintergrund des Elternelements rutschen, was oft überrascht. isolation: isolate am Elternelement erzeugt einen Context ohne jeden anderen optischen Effekt und hält das negative Kind darin:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Negative z-index</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .button {
      position: relative;
      padding: 14px 20px; background: #e5e7eb; font-weight: 600;
    }
    .button::before {
      content: "";
      position: absolute; inset: -6px;
      background: #f59e0b;
      z-index: -1;               /* behind the button's text */
    }
    .isolated { isolation: isolate; }
  </style>
</head>
<body>
  <div class="button">No isolation</div>
  <div class="button isolated">isolation: isolate</div>
</body>
</html>

Ohne isolation fällt der bernsteinfarbene Rahmen hinter den eigenen grauen Hintergrund des Buttons, sodass nur sein Rand zu sehen ist. Mit isolation: isolate bleibt der Rahmen im Stacking Context des Buttons: über seinem Hintergrund, unter seinem Text.

Eine z-index-Skala

Wähl ein paar benannte Ebenen für die ganze Website, statt die Zahlen immer weiter hochzutreiben:

:root {
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;
}
.modal { position: fixed; z-index: var(--z-modal); }

Die meisten Fehler beim Stapeln sind Stacking-Context-Fehler, keine Zahlenfehler. Eine kleine Skala plus isolation: isolate an Komponenten, die intern z-index nutzen, bringt dich also weit. z-index braucht Positionierung, um zu wirken; die Seite zu Position behandelt das.

Häufige Fehler

z-index an einem statischen Element. Füge position: relative hinzu (oder mach es zu einem Flex- oder Grid-Item).
Auf 9999 eskalieren. Bildet ein Elternelement einen Stacking Context unter dem Konkurrenten, kann kein Wert am Kind gewinnen. Such stattdessen den Context.
Ein neues opacity, transform oder filter an einem Elternelement, das plötzlich sein Dropdown einschließt.
Dezimalwerte. z-index: 1.5 ist ungültig.
Erwarten, dass sich z-index: 0 und auto gleich verhalten. 0 erzeugt einen Stacking Context; auto nicht.
Modals tief in verschachtelten Komponenten. Rendere sie nahe am Ende von <body> (oder nutze die Top Layer des Elements <dialog>), damit kein Context eines Vorfahren sie einschließen kann.

Häufig gestellte Fragen

Was macht z-index?

Es legt die Stapelreihenfolge überlappender Elemente fest: Ein höherer Wert wird innerhalb desselben Stacking Contexts vor einem niedrigeren gezeichnet. Der Standard ist auto, und die Werte sind ganze Zahlen, auch negative.

Warum funktioniert mein z-index nicht?

Entweder ist das Element nicht positioniert (z-index braucht eine position ungleich static oder ein Flex- bzw. Grid-Kind), oder es liegt in einem Elternelement, das einen Stacking Context mit niedrigerer Reihenfolge bildet. Ein Kind kann nie über ein Element steigen, unter dem sein Stacking Context liegt, egal wie hoch sein eigener z-index ist.

Was ist ein Stacking Context?

Eine Gruppe von Elementen, die gemeinsam als eine Ebene gestapelt werden. Innerhalb davon werden die Kinder nach ihrem z-index sortiert; nach außen wird die ganze Gruppe nach dem z-index des Elements platziert, das sie erzeugt hat.

Was erzeugt einen Stacking Context?

Unter anderem: das Wurzelelement, ein positioniertes Element mit einem z-index ungleich auto, position: fixed oder sticky, ein Flex- oder Grid-Kind mit z-index, opacity unter 1, transform, filter, isolation: isolate und will-change für diese Eigenschaften.

Funktioniert z-index ohne position?

Nicht an normalen Block- oder Inline-Elementen: position: static ignoriert es. An Flex-Items und Grid-Items funktioniert es ganz ohne position.

Verwandte Konzepte