z-index

Die CSS-Eigenschaft z-index legt die z-Reihenfolge eines positionierten Elements und seiner Abkömmlinge oder Flex-Elemente fest. Überlappende Elemente mit einem größeren z-index überdecken diejenigen mit einem kleineren.

Für einen positionierte Box (d.h. eine mit einer position anders als static) ist für die Eigenschaft z-index spezifiert:

For a positioned box (that is, one with any position other than static), the z-index property specifies:

Die Stapelebene der Box im aktuellen Stapel-Zusammenhang.
Ob die Box einen lokalen Stapel-Zusammenhang herstellt.

Syntax

/* Schlüsselwortwert */
z-index: auto;

/* <integer> Werte */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Negative Werte, um die Priorität zu senken */

/* Globale Werte*/
z-index: inherit;
z-index: initial;
z-index: unset;

Werte

auto: Die Box etabliert keinen neuen lokalen Stapelkontext. Die generierte Box befindet sich im aktuellen Stapelkontext auf gleicher Ebene wie dessen Elternbox.
<integer>: Der integer legt die Stapelebene des momentanen Stapelkontexts fest. Die Box etabliert zudem einen neuen Stapelkontext, dessen Stapelebene 0 ist. Dadurch werden die z-Indizes von Kinder-Elementen nicht mit z-Indizes außerhalb des Elements verglichen.

Formale Definition

Initialwert	`auto`
Anwendbar auf	positionierte Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Integer
Erstellt Stapelkontext	Ja

Formale Syntax

auto | <integer>

Beispiele

Visuelle Schichtenelement

HTML

<div class="wrapper">
  <div class="dashed-box">Dashed box</div>
  <div class="gold-box">Gold box</div>
  <div class="green-box">Green box</div>
</div>

CSS

.wrapper {
  position: relative;
}

.dashed-box { 
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box { 
  position: absolute;
  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box { 
  position: absolute;
  z-index: 2; /* put .green-box above .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

Ergebnis

Spezifikationen

Spezifikation	Status	Kommentar
CSS Transitions Die Definition von 'animation behavior for z-index' in dieser Spezifikation.	Arbeitsentwurf	Definiert `z-index` als animierbar.
CSS Level 2 (Revision 1) Die Definition von 'z-index' in dieser Spezifikation.	Empfehlung	Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
`z-index`	Chrome Vollständige Unterstützung 1	Edge Vollständige Unterstützung 12	Firefox Vollständige Unterstützung 1	IE Vollständige Unterstützung 4	Opera Vollständige Unterstützung 4	Safari Vollständige Unterstützung 1	WebView Android Vollständige Unterstützung ≤37	Chrome Android Vollständige Unterstützung 18	Firefox Android Vollständige Unterstützung 4	Opera Android Vollständige Unterstützung 14	Safari iOS Vollständige Unterstützung 1	Samsung Internet Android Vollständige Unterstützung 1.0
Negative values	Chrome Vollständige Unterstützung 1	Edge Vollständige Unterstützung 12	Firefox Vollständige Unterstützung 3	IE Vollständige Unterstützung 4	Opera Vollständige Unterstützung 4	Safari Vollständige Unterstützung 1	WebView Android Vollständige Unterstützung ≤37	Chrome Android Vollständige Unterstützung 18	Firefox Android Vollständige Unterstützung 4	Opera Android Vollständige Unterstützung 14	Safari iOS Vollständige Unterstützung 1	Samsung Internet Android Vollständige Unterstützung 1.0

Legende

Vollständige Unterstützung: Vollständige Unterstützung

Siehe auch

CSS-Eigenschaft position
Understanding CSS z-index