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

cssselektor {
  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):

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

css#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):

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

css#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;
}

Результат: