Właściwość z-index
Właściwość z-index określa, który element
będzie na wierzchu, gdy kilka elementów
nakłada się na siebie.
Składnia
selektor {
z-index: liczba | auto;
}
Liczba musi być całkowita, dodatnia lub ujemna. Może być zerem.
Wartości
| Wartość | Opis |
|---|---|
| Liczba |
Liczba całkowita określa kolejność nakładania elementów:
przy nakładaniu się elementów na wierzchu
znajdzie się ten, którego z-index jest większy.
|
auto |
Kolejność nakładania jest budowana automatycznie: wyżej będzie ten element, który znajduje się niżej w kodzie HTML. |
Wartość domyślna: auto.
Przykład
W tym przykładzie bloki będą nakładać się
nawzajem w kolejności ich występowania w kodzie HTML
(z-index nie jest ustawiony i będzie miał
wartość domyślną - auto). Pierwszy
blok będzie na samym dole (czerwony), a ostatni
- na samej górze (zielony):
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
#div1 {
position: absolute;
top: 30px;
left: 30px;
width: 50px;
height: 50px;
background: red;
}
#div2 {
position: absolute;
top: 60px;
left: 60px;
width: 50px;
height: 50px;
background: blue;
}
#div3 {
position: absolute;
top: 90px;
left: 90px;
width: 50px;
height: 50px;
background: green;
}
:
Przykład
Zmieńmy kolejność nakładania, ustawiając z-index.
Czerwonemu blokowi - 3, niebieskiemu - 2,
zielonemu - 1. Kolejność nakładania zmieni się
na odwrotną (najwyżej będzie blok z z-index
3):
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
#div1 {
position: absolute;
top: 30px;
left: 30px;
width: 50px;
height: 50px;
background: red;
z-index: 3;
}
#div2 {
position: absolute;
top: 60px;
left: 60px;
width: 50px;
height: 50px;
background: blue;
z-index: 2;
}
#div3 {
position: absolute;
top: 90px;
left: 90px;
width: 50px;
height: 50px;
background: green;
z-index: 1;
}
: