Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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
Animierbarja, als Integer
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>
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

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

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
Grundlegende Unterstützung 1.0 1.0 (1.7 oder früher) 4.0 4.0 1.0
Negative Werte (CSS 2.1 Verhalten, nicht erlaubt in der veralteten CSS 2 Spezifikation) 1.0 3.0 (1.9) 4.0 4.0 1.0
Merkmal Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundlegende Unterstützung ? ? ? ? ?
Negative Werte (CSS 2.1 Verhalten, nicht erlaubt in der veralteten CSS 2 Spezifikation) ? ? ? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz, fscholz, rwetzlmayr, axlwaii
 Zuletzt aktualisiert von: Sebastianz,