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.

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>

Durch einen Integer kann die aktuelle Stapelebene festgelegt werden. Die Box erhält fdie lokalen Stapelkontext, in dem seine Stapelebene 0 ist. Das bedeutet, dass die z-Indexen der Nachkommen nicht  mit den z-Indexen der Elemente außerhalb dieses Element verglichen werden.

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

Browser Kompatibilität

Siehe auch

• CSS position Eigenschaft
• Den Z-Index verstehen