z-index
Własność z-index
określa kolejność elementów wzdłuż osi z. Kiedy elementy nachodzą na siebie, kolejność osi z
decyduje, który element przykrywa inny. Element z większym indeksem z
zazwyczaj przykrywa element z mniejszym.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
- Wartość początkowa:
auto
(en-US) - Stosowana do:
elementów pozycjonowanych
(en-US) - Dziedziczona: nie
- Media:
visual
(en-US) - Wartość wyliczona: jako określona
Składnia
/* Właściwość wartość */
z-index: auto;
/* wartość jako liczba */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* wartość ujemna w celu zmniejszenia priorytetu */
/* globalne wartości */
z-index: inherit;
z-index: initial;
z-index: unset;
Wartość z-index
jest określona słowem kluczowym auto
lub jako <liczba>
.
Wartości
- auto
- Element jest rysowany w takiej samej kolejności względem osi z jak element z
z-index: 0
.Nie tworzy nowego kontekstu nakładania. <liczba>
- Element jest rysowany w podanej kolejności względem osi z. Tworzy również nowy kontekst nakładania, co oznacza, że wszystkie jego elementy potomne również są rysowane z takim samym indeksem z. Oznacza to również, że indeksy z elementów potomnych nie są porównywane do indeksów z elementów na zewnątrz danego elementu.
Przykład
HTML
<div class="dashed-box">Dashed box
<span class="gold-box">Gold box</span>
<span class="green-box">Green box</span>
</div>
CSS
.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;
}
Wynik
Specifikacja
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'animation behavior for z-index' in that specification. |
Working Draft | Defines z-index as animatable. |
CSS Level 2 (Revision 1) The definition of 'z-index' in that specification. |
Recommendation | Initial definition |
Zgodność z przeglądarką
BCD tables only load in the browser