z-index

Übersicht

Die z-index Eigenschaft legt die Reihenfolge entlang der z-Achse eines Elements und seiner Unterelemente fest. Wenn Elemente überlappen, wird über die z-Reihenfolge festgelegt welches Element das andere überdeckt. Das Element mit dem höheren z-index überdeckt üblicherweise eines mit einem niedrigerem.

Für eine positionierte Box spezifiziert die z-index Eigenschaft: 

  1. Die Stapelebene der Box im aktuellen Stapelkontext.
  2. Ob die Box einen lokalen Stapelkontext etabliert.
Initialwertauto
Anwendbar aufpositionierte Elemente
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
AnimationstypInteger
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik
Erstellt StapelkontextJa

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 Syntax

auto | <integer>

Beispiele

HTML

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

CSS

.dashed-box { 
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}

.gold-box { 
  position: absolute;
  z-index: 3; /* Legt .gold-box über .green-box und .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}

.green-box { 
  position: absolute;
  z-index: 2; /* Legt .green-box über .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 20em;
  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 JaSafari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung Ja
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 JaSafari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung Ja

Legende

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

Siehe auch