Style zIndex Eigenschaft
- Vorherige Seite widows
- Nächste Seite alignContent
- Zurück zur Oberfläche HTML DOM Style-Objekt
Definition und Verwendung
zIndex
Eigenschaft, die die Stacking-Ordnung der positionierten Elemente einstellt oder zurückgibt.
Elemente mit höherer Stacking-Ordnung (1) stehen immer vor Elementen mit niedrigerer Stacking-Ordnung (0).
Tipp:Positionierte Elemente sind position-Eigenschaft gesetzt auf:relative
,absolute
oder fixed
der Elemente.
Tipp:Diese Eigenschaft ist nützlich, um überlappende Elemente zu erstellen.
Weitere Informationen:
CSS-Tutorial:CSS-Position
CSS-Referenzhandbuch:z-index-Eigenschaft
Beispiel
Beispiel 1
Ändern Sie die Stacking-Ordnung des <img>-Elements:
document.getElementById("img1").style.zIndex = "1";
Beispiel 2
Ändern Sie den z-index-Wert des <div>-Elements:
document.getElementById("myDIV").style.zIndex = "-1";
Beispiel 3
Rückgabe des z-index-Werts des <img>-Elements:
alert(document.getElementById("img1").style.zIndex);
Syntax
Rückgabe der zIndex-Eigenschaft:
object.style.zIndex
Ziehen Sie die zIndex-Eigenschaft ein:
object.style.zIndex = "auto|number|initial|inherit"
Eigenschaftswert
Wert | Beschreibung |
---|---|
auto | Der Browser bestimmt die Stacking-Ordnung des Elements (basierend auf seiner Position im Dokument). Standard. |
number | Ganze Zahl, die die Stacking-Ordnung des Elements definiert. Negative Werte sind erlaubt. |
initial | Diese Eigenschaft auf ihren Standardwert setzen. Siehe initial. |
inherit | Diese Eigenschaft von ihrem übergeordneten Element geerbt. Siehe inherit. |
Technische Details
Standardwert: | auto |
---|---|
Rückgabewert: | Zeichenkette, die die Stacking-Ordnung des Elements darstellt. |
CSS Version: | CSS2 |
Browser-Unterstützung
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Unterstützung | Unterstützung | Unterstützung | Unterstützung | Unterstützung |
- Vorherige Seite widows
- Nächste Seite alignContent
- Zurück zur Oberfläche HTML DOM Style-Objekt