z-index

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die z-index CSS-Eigenschaft legt die Z-Ordnung eines positionierten Elements und seiner Nachkommen oder von Flex- und Gitter-Elementen fest. Überlappende Elemente mit einem größeren z-index überdecken solche mit einem kleineren.

Probieren Sie es aus

Für ein positioniertes Feld (d.h. eines mit einer anderen position als static) gibt die z-index-Eigenschaft Folgendes an:

  1. Die Stapel-Ebene des Feldes im aktuellen Stacking-Kontext.
  2. Ob das Feld einen lokalen Stacking-Kontext erstellt.

Syntax

css
/* Keyword value */
z-index: auto;

/* <integer> values */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Negative values to lower the priority */

/* Global values */
z-index: inherit;
z-index: initial;
z-index: revert;
z-index: revert-layer;
z-index: unset;

Die z-index-Eigenschaft wird entweder als das Schlüsselwort auto oder als <integer> angegeben.

Werte

auto

Das Feld erstellt keinen neuen lokalen Stacking-Kontext. Die Stapel-Ebene des generierten Feldes im aktuellen Stacking-Kontext ist 0.

<integer>

Dieses <integer> ist die Stapel-Ebene des generierten Feldes im aktuellen Stacking-Kontext. Das Feld erstellt auch einen lokalen Stacking-Kontext. Das bedeutet, dass die z-indexe der Nachkommen nicht mit den z-indexen der Elemente außerhalb dieses Elements verglichen werden.

Formale Definition

Anfangswertauto
Anwendbar aufpositionierte Elemente
VererbtNein
Berechneter Wertwie angegeben
AnimationstypInteger
Erstellt StapelkontextJa

Formale Syntax

z-index = 
  auto       |
  <integer>  |
  inherit

Beispiele

Visuelle Schichtung von Elementen

HTML

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

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

Specification
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
# z-index

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch