Svojstvo z-index

Svojstvo z-index određuje koji element će biti na vrhu u slučaju da se više elemenata preklapa.

Sintaksa

cssselektor {
  z-index: broj | auto;
}

Broj mora biti ceo broj, pozitivan ili negativan. Može biti nula.

Vrednosti

Vrednost	Opis
Broj	Celi broj određuje redosled slaganja elemenata: pri preklapanju elemenata, na vrhu će se naći onaj čiji je `z-index` veći.
`auto`	Redosled slaganja se automatski gradi: iznad će biti onaj element koji je u HTML kodu pozicioniran niže.

Podrazumevana vrednost: auto.

Primer

U ovom primeru, blokovi će se slagati jedan preko drugog po redosledu kojim se pojavljuju u HTML kodu (z-index nije postavljen i imaće podrazumevanu vrednost - auto). Prvi blok će biti na samom dnu (crveni), a poslednji - iznad svih (zeleni):

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

Результат:

Primer

Promenimo redosled slaganja, podešavanjem z-index. Crvenom bloku - 3, plavom - 2, zelenom - 1. Redosled slaganja će se promeniti u obrnut (iznad svih će biti blok sa 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;
}

Результат: