Vlastnosť z-index

Vlastnosť z-index určuje, kto bude navrchu v prípade, že sa viacero prvkov navzájom prekrýva.

Syntax

cssselektor {
  z-index: číslo | auto;
}

Číslo musí byť celé, kladné alebo záporné. Môže byť nula.

Hodnoty

Hodnota	Popis
Číslo	Celé číslo určuje poradie prekrývania prvkov: pri prekrývaní prvkov sa navrchu ocitne ten, ktorého `z-index` je väčší.
`auto`	Poradie prekrývania sa stavia automaticky: vyššie bude ten prvok, ktorý sa nachádza nižšie v HTML kóde.

Predvolená hodnota: auto.

Príklad

V tomto príklade sa bloky budú prekrývať v poradí, v akom nasledujú v HTML kóde (z-index nie je zadaný a bude mať predvolenú hodnotu - auto). Prvý blok bude úplne dole (červený), a posledný - najvyššie (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;
}

Результат:

Príklad

Zmeňme poradie prekrývania zadaním z-index. Červenému bloku - 3, modrému - 2, zelenému - 1. Poradie prekrývania sa zmení na opačné (najvyššie bude blok s 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;
}

Результат: