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

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Siehe auch

• CSS position Eigenschaft
• Den Z-Index verstehen