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
# z-index

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
z-index
auto
Negative values

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch