W3docs
de
Anmelden

CSS z-index-Eigenschaft

Verwenden Sie die CSS-Eigenschaft z-index, um die Stapelreihenfolge von Elementen festzulegen. Erfahren Sie mehr über Werte und probieren Sie Beispiele aus.

Die CSS-Eigenschaft z-index steuert die Stapelreihenfolge überlappender Elemente — welches vorne erscheint und welches dahinter verborgen ist. Der Name stammt von der imaginären z-Achse: Die x-Achse verläuft von links nach rechts, die y-Achse von oben nach unten und die z-Achse zeigt aus dem Bildschirm heraus auf Sie zu. Ein Element mit einem höheren z-index liegt näher am Betrachter und überdeckt Elemente mit einem niedrigeren Wert.

Diese Seite behandelt, was z-index bewirkt, warum es nur bei positionierten Elementen funktioniert, wie Stapelkontexte bestimmen, welche Werte überhaupt verglichen werden, und die häufigsten Gründe, warum ein z-index „nicht funktioniert".

Wie Stapeln funktioniert

Wenn Elemente sich überlappen, wird standardmäßig dasjenige, das später im HTML-Quellcode steht, oben gezeichnet. Mit z-index können Sie diese Reihenfolge explizit überschreiben. Beispielsweise wird z-index: 10 über z-index: 1 liegen, unabhängig von der Quellreihenfolge, und negative Werte wie z-index: -1 verschieben ein Element hinter seinen Elternteil.

Aber z-index ist kein globales Ranking. Werte werden nur innerhalb desselben Stapelkontexts verglichen. Ein Stapelkontext ist eine eigenständige Ebene: Alle Elemente darin werden relativ zu ihren Geschwistern gestapelt, und die gesamte Gruppe wird dann als eine Einheit innerhalb des übergeordneten Kontexts gestapelt. Das Seitenstammelement (<html>) erstellt den ersten Stapelkontext, und bestimmte Eigenschaften erstellen neue (siehe unten).

Info

Die Eigenschaft z-index hat keine Wirkung auf static-Elemente (der Standard). Sie gilt nur für positionierte Elemente — solche, bei denen position auf relative, absolute, fixed oder sticky gesetzt ist — sowie für Flex/Grid-Elemente.

Anfangswertauto
Gilt fürPositionierte Elemente.
VererbbarNein.
AnimierbarJa.
VersionCSS2
DOM-Syntaxobject.style.zIndex = "-1";

Syntax

Syntax der CSS z-index-Eigenschaft

z-index: auto | number | initial | inherit;

Beispiel der z-index-Eigenschaft mit einem negativen Wert:

Beispiel der CSS z-index-Eigenschaft mit negativem Wert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        left: 0;
        top: 10px;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <h2>Z-index property example</h2>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="200" height="100" />
  </body>
</html>
Probier es selbst »

Beispiel der z-index-Eigenschaft mit einem positiven Wert:

Beispiel der CSS z-index-Eigenschaft mit Zahlenwert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #blue,
      #green,
      #grey {
        position: absolute;
        width: 150px;
        height: 150px;
        color: #eee;
        opacity: 0.95;
        padding: 15px;
        line-height: 100px;
        text-align: center;
      }
      #blue {
        z-index: 1;
        background-color: #1c87c9;
        top: 60px;
        left: 50px;
        line-height: 1;
      }
      .black {
        height: 80px;
        width: 160px;
        background-color: #000;
        line-height: 100px;
        bottom: 20px;
        position: absolute;
        z-index: 10;
      }
      #green {
        z-index: 2;
        background-color: #8ebf42;
        top: 100px;
        left: 170px;
      }
      #grey {
        background-color: #666;
        top: 200px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Z-index property example</h2>
    <div class="container">
      <div id="blue">
        Blue
        <div class="black">Black</div>
      </div>
      <div id="green">Green</div>
      <div id="grey">Grey</div>
    </div>
  </body>
</html>
Probier es selbst »

Hier überlappen sich die Boxen, da sie alle absolut positioniert sind. Die blaue Box (z-index: 1) liegt unterhalb der grünen Box (z-index: 2), und die graue Box hat keinen z-index, fällt also auf die Quellreihenfolge zurück. Beachten Sie, dass die schwarze Box (z-index: 10) innerhalb der blauen Box verschachtelt ist: Ihr z-index: 10 wird nur mit anderen Kindern von blue verglichen, sodass sie nicht über die grüne Box steigen kann, obwohl 10 > 2. Das ist die Stapelkontext-Regel in Aktion.

Ergebnis

CSS z-index-Eigenschaft

Werte

WertBeschreibungAusprobieren
autoDie Stapelebene der erzeugten Box entspricht der des Elternelements. Dies ist der Standardwert dieser Eigenschaft.Ausprobieren »
numberDie Stapelebene der erzeugten Box wird durch Zahlen angegeben. Negative Werte sind gültig.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert zurück.Ausprobieren »
inheritErbt die Eigenschaft vom Elternelement.

Was einen neuen Stapelkontext erstellt

Das Verstehen von Stapelkontexten ist der Schlüssel zur Beherrschung von z-index. Ein neuer Kontext wird unter anderem erstellt durch:

  • Das Stammelement <html>.
  • Ein positioniertes Element (relative, absolute, fixed, sticky) mit einem z-index ungleich auto.
  • Ein Flex- oder Grid-Kindelement mit einem z-index ungleich auto.
  • Ein Element mit einem opacity-Wert kleiner als 1 (siehe opacity).
  • Ein Element mit einem transform-, filter-, perspective-, clip-path- oder mask-Wert ungleich none (siehe transform).
  • Ein Element mit position: fixed oder position: sticky.
  • Ein Element mit isolation: isolate.
  • Ein Element mit will-change, das auf eine Eigenschaft gesetzt ist, die einen Kontext erstellen würde.

Sobald ein Element einen Stapelkontext bildet, ist der z-index seiner Nachfolger darin „eingeschlossen" — sie können nie entkommen, um mit Elementen außerhalb des Elternelements zu konkurrieren.

Warum Ihr z-index „nicht funktioniert"

Dies sind die üblichen Ursachen, geordnet nach Häufigkeit:

  1. Das Element ist static. z-index wird stillschweigend ignoriert, wenn position nicht relative, absolute, fixed oder sticky ist (oder das Element ein Flex/Grid-Element ist). Setzen Sie zuerst eine Position.
  2. Ein Elternelement bildet einen Stapelkontext. Ein Modal mit z-index: 9999 kann trotzdem hinter einem anderen Element verschwinden, wenn sein Vorfahre in einem niedriger gestapelten Kontext sitzt. Die Lösung besteht darin, den z-index des Vorfahren zu erhöhen, nicht den des Nachfolgers.
  3. Ein Vorfahre hat opacity oder transform. Sogar ein harmlos aussehendes opacity: 0.99 oder transform: translateZ(0) (oft für „GPU-Beschleunigung" hinzugefügt) erstellt einen Stapelkontext und kann Kindelemente einschließen.
  4. Sie kämpfen gegen die Quellreihenfolge. Ohne z-index gewinnen spätere Elemente. Das Umordnen des HTML ist manchmal einfacher als ein z-index-Wettrüsten.
Warnung

Vermeiden Sie große „Magiezahlen" wie z-index: 999999. Sie machen die Stapelreihenfolge unüberschaubar. Verwenden Sie eine kleine, dokumentierte Skala (zum Beispiel 1, 10, 100, 1000 für Inhalte, Dropdowns, Sticky-Leisten und Modale).

Beispiel: Isolierung eines Stapelkontexts

Die Eigenschaft isolation: isolate erstellt einen neuen Stapelkontext ohne Änderung von Positionierung oder Deckkraft. Es ist die sauberste Methode, die z-index-Werte einer Komponente einzugrenzen:

.card {
  /* z-index values inside .card now stay inside .card */
  isolation: isolate;
}

Verwandte Eigenschaften

  • position — erforderlich, damit z-index wirksam wird.
  • opacity — Werte unter 1 erstellen einen Stapelkontext.
  • transform — Werte ungleich none erstellen einen Stapelkontext.

Übungen

Übung
Was bewirkt die Eigenschaft 'z-index' in CSS?
Was bewirkt die Eigenschaft 'z-index' in CSS?
Was this page helpful?