CSS z-index Eigenschaft

Definition und Verwendung

Die Eigenschaft z-index legt die Stapelreihenfolge des Elements fest. Ein Element mit höherer Stapelreihenfolge ist immer vor einem Element mit niedrigerer Stapelreihenfolge positioniert.

Anmerkung:Ein Element kann einen negativen Wert der Eigenschaft z-index haben.

Anmerkung:Z-index funktioniert nur auf positionierten Elementen (z.B. position:absolute;)

Erklärung

Diese Eigenschaft legt die Position des positionierten Elements entlang der Z-Achse fest, die als die Achse definiert wird, die senkrecht in den Anzeigebereich verläuft. Wenn es eine positive Zahl ist, ist es näher am Benutzer, und wenn es eine negative Zahl ist, bedeutet es, dass es weiter vom Benutzer entfernt ist.

Siehe auch:

CSS-Tutorial:CSS-Positionierung

HTML DOM Referenzhandbuch:Z-index-Eigenschaft

Beispiel

Setzen Sie den Z-index der Abbildung:

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

Versuchen Sie es selbst

CSS-Syntax

z-index: auto|number|initial|inherit;

Eigenschaftswert

Wert Beschreibung
auto Standard. Die Stapelreihenfolge entspricht der des übergeordneten Elements.
number Setzt die Stapelreihenfolge des Elements.
inherit Es wird festgelegt, dass der Wert der Eigenschaft z-index vom übergeordneten Element geerbt werden soll.

Technische Details

Standardwert: auto
Vererbbarkeit: nein
Version: CSS2
JavaScript-Syntax: object.style.zIndex="1"

Mehr Beispiele

Z-index
Z-index kann verwendet werden, um ein Element nach einem anderen Element zu platzieren.
Z-index
Der Element im obigen Beispiel hat den Z-index geändert.

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die die Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 3.0 1.0 4.0