Es gab einen Skriptfehler auf dieser Seite. Während dieser von Website-Redakteuren bearbeitet wird, können Sie im Folgenden Teile des Inhalts ansehen.

{{CSSRef}}

Ü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.

{{cssinfo}}

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 {{cssxref("<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

{{csssyntax}}

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

{{ EmbedLiveSample('Beispiele', '550', '200')}}

Spezifikationen

Spezifikation Status Kommentar
{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}} {{Spec2('CSS3 Transitions')}} Definiert z-index als animierbar.
{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}} {{Spec2('CSS2.1')}} Ursprüngliche Definition

Browser Kompatibilität

{{CompatibilityTable}}

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
Grundlegende Unterstützung 1.0 {{CompatGeckoDesktop("1.0")}} 4.0 4.0 1.0
Negative Werte (CSS 2.1 Verhalten, nicht erlaubt in der veralteten CSS 2 Spezifikation) 1.0 {{CompatGeckoDesktop("1.9")}} 4.0 4.0 1.0
Merkmal Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundlegende Unterstützung {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Negative Werte (CSS 2.1 Verhalten, nicht erlaubt in der veralteten CSS 2 Spezifikation) {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

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