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:

Für eine positionierte Box (d. h. eine mit einer anderen als der statischen Position) gibt die Eigenschaft z-index an:

  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

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

BCD tables only load in the browser

Siehe auch