CSS z-index-Eigenschaft
Die CSS z-index-Eigenschaft bestimmt die z-Reihenfolge eines Elements sowie seiner Kindelemente oder Flex-Items. Die z-Reihenfolge gibt die Anordnung der Elemente auf der z-Achse an.
Der z-index eines Elements bestimmt dessen Reihenfolge innerhalb eines Stapelkontexts. Ein Stapelkontext ist eine Gruppe von Elementen, die ein gemeinsames Elternelement haben.
Elemente mit einer höheren Stapelreihenfolge liegen vor Elementen mit einer niedrigeren Stapelreihenfolge. Elemente mit einer nicht-statischen Positionierung liegen über Elementen mit der Standard-Positionierung „static“.
INFO
Die z-index-Eigenschaft wirkt sich nur auf positionierte Elemente aus, die einen Wert ungleich „static“ haben.
| Ausgangswert | auto |
|---|---|
| Gilt für | Positionierte Elemente. |
| Vererbbar | Nein. |
| Animierbar | Ja. |
| Version | CSS2 |
| DOM-Syntax | object.style.zIndex = "-1"; |
Syntax
Syntax der CSS z-index-Eigenschaft
z-index: auto | number | initial | inherit;Beispiel für die z-index-Eigenschaft mit einem negativen Wert:
Beispiel für die CSS z-index-Eigenschaft mit negativem Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
left: 0;
top: 10px;
z-index: -1;
}
</style>
</head>
<body>
<h2>Z-index property example</h2>
<img src="https://de.w3docs.com/build/images/w3docs-logo-black.png" alt="W3docs logo" width="200" height="100" />
</body>
</html>Beispiel für die z-index-Eigenschaft mit einem positiven Wert:
Beispiel für die CSS z-index-Eigenschaft mit Zahlenwert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blue,
#green,
#grey {
position: absolute;
width: 150px;
height: 150px;
color: #eee;
opacity: 0.95;
padding: 15px;
line-height: 100px;
text-align: center;
}
#blue {
z-index: 1;
background-color: #1c87c9;
top: 60px;
left: 50px;
line-height: 1;
}
.black {
height: 80px;
width: 160px;
background-color: #000;
line-height: 100px;
bottom: 20px;
position: absolute;
z-index: 10;
}
#green {
z-index: 2;
background-color: #8ebf42;
top: 100px;
left: 170px;
}
#grey {
background-color: #666;
top: 200px;
left: 100px;
}
</style>
</head>
<body>
<h2>Z-index property example</h2>
<div class="container">
<div id="blue">
Blue
<div class="black">Black</div>
</div>
<div id="green">Green</div>
<div id="grey">Grey</div>
</div>
</body>
</html>Ergebnis
Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| auto | Die Stapelstufe der generierten Box entspricht der ihres Elternelements. Dies ist der Standardwert dieser Eigenschaft. | Ausführen » |
| number | Die Stapelstufe der generierten Box wird durch Zahlen angegeben. Negative Werte sind gültig. | Ausführen » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Ausführen » |
| inherit | Erbt die Eigenschaft von ihrem Elternelement. |
Practice
Was bewirkt die 'z-index'-Eigenschaft in CSS?