Atribuut z-index

Atribuut z-index määrab, mis element on pealpool juhul, kui mitu elementi katavad teineteist.

Süntaks

cssvalija {
  z-index: täisarv | auto;
}

Täisarv peab olema positiivne või negatiivne. Võib olla null.

Väärtused

Väärtus	Kirjeldus
Täisarv	Täisarv määrab elementide pealekattumise järjekorra: elementide pealekattumisel on pealpool see, kelle `z-index` on suurem.
`auto`	Pealekattumise järjekord ehitatakse automaatselt: pealpool on see element, mis asub HTML-koodis allpool.

Vaikeväärtus: auto.

Näide

Selles näites kattuvad plokid teineteisele vastavalt nende järjestusele HTML- koodis (z-index pole määratud ja sellel on vaikeväärtus - auto). Esimene plokk on allpool (punane) ja viimane - pealpool (roheline):

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

Результат:

Näide

Muudame pealekattumise järjekorda, määrates z-index. Punasele plokile - 3, sinisele - 2, rohelisele - 1. Pealekattumise järjekord muutub vastupidiseks (pealpool on plokk, mille z-index on 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;
}

Результат: