z-index
Try it
Die CSS-Eigenschaft z-index
legt die z-Reihenfolge eines positionierten Elements und seiner Abkömmlinge oder Flex-Elemente fest. Überlappende Elemente mit einem größeren z-index
überdecken diejenigen mit einem kleineren.
Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte https://github.com/mdn/interactive-examples und senden Sie uns eine Pull-Anfrage.
Für einen positionierte Box (d.h. eine mit einer
anders als position
static
) ist für die Eigenschaft z-index
spezifiert:
Für eine positionierte Box (d. h. eine mit einer anderen als der statischen Position) gibt die Eigenschaft z-index
an:
- Die Stapelebene der Box im aktuellen Stapel-Zusammenhang.
- Ob die Box einen lokalen Stapel-Zusammenhang herstellt.
Syntax
/* Schlüsselwortwert */
z-index: auto;
/* <integer> Werte */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Negative Werte, um die Priorität zu senken */
/* Globale Werte*/
z-index: inherit;
z-index: initial;
z-index: unset;
Werte
auto
- Die Box etabliert keinen neuen lokalen Stapelkontext. Die generierte Box befindet sich im aktuellen Stapelkontext auf gleicher Ebene wie dessen Elternbox.
<integer>
- Der
integer
legt die Stapelebene des momentanen Stapelkontexts fest. Die Box etabliert zudem einen neuen Stapelkontext, dessen Stapelebene 0 ist. Dadurch werden die z-Indizes von Kinder-Elementen nicht mit z-Indizes außerhalb des Elements verglichen.
Formale Definition
Initialwert | auto |
---|---|
Anwendbar auf | positionierte Elemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | Integer |
Erstellt Stapelkontext | Ja |
Formale Syntax
Beispiele
Visuelle Schichtenelement
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
.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
Spezifikation | Status | Kommentar |
---|---|---|
CSS Transitions Die Definition von 'animation behavior for z-index' in dieser Spezifikation. |
Arbeitsentwurf | Definiert z-index als animierbar. |
CSS Level 2 (Revision 1) Die Definition von 'z-index' in dieser Spezifikation. |
Empfehlung | Ursprüngliche Definition |
Browser Kompatibilität
BCD tables only load in the browser
Siehe auch
- CSS-Eigenschaft
position
- Understanding CSS z-index