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:

  1. Die Stapelebene der Box im aktuellen Stapel-Zusammenhang.
  2. 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

Initialwertauto
Anwendbar aufpositionierte Elemente
VererbtNein
Berechneter Wertwie angegeben
AnimationstypInteger
Erstellt StapelkontextJa

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
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
z-indexChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 4Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0
Negative valuesChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 4Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0

Legende

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

Siehe auch