Lastnost z-index

Lastnost z-index določa, kdo bo na vrhu v primeru, če se več elementov prekriva drug z drugim.

Sintaksa

cssselektor {
  z-index: število | auto;
}

Število mora biti celo, pozitivno ali negativno. Lahko je nič.

Vrednosti

Vrednost	Opis
Število	Celo število določa vrstni red prekrivanja elementov: pri prekrivanju elementov drug z drugim bo na vrhu tisti, ki ima večji `z-index`.
`auto`	Vrstni red prekrivanja se gradi samodejno: zgoraj bo tisti element, ki se nahaja nižje v HTML kodi.

Privzeta vrednost: auto.

Primer

V tem primeru se bodo bloki prekrivali drug z drugim v vrstnem redu, kot sledijo v HTML kodi (z-index ni določen in bo imel privzeto vrednost - auto). Prvi blok bo povsem spodaj (rdeč), zadnji pa bo na vrhu (zelen):

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

Spremenimo vrstni red prekrivanja z določitvijo z-index. Rdečemu bloku - 3, modremu - 2, zelenemu - 1. Vrstni red prekrivanja se bo spremenil v obratnega (na vrhu bo 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;
}

Результат: