Z-Index-ominaisuus

Ominaisuus z-index määrittää, kuka tulee päälle siinä tapauksessa, että useita elementtejä asetetaan päällekkäin.

Syntaksi

cssvalitsija {
  z-index: luku | auto;
}

Luvun on oltava kokonaisluku, positiivinen tai negatiivinen. Se voi olla nolla.

Arvot

Arvo	Kuvaus
Luku	Kokonaisluku asettaa elementtien asettamisen järjestyksen: kun elementit asetetaan päällekkäin, päällimmäiseksi jää se, jonka `z-index` on suurempi.
`auto`	Asettamisjärjestys rakennetaan automaattisesti: ylempänä on se elementti, joka sijaitsee alempana HTML-koodissa.

Oletusarvo: auto.

Esimerkki

Tässä esimerkissä lohkot asettuvat päällekkäin niiden esiintymisjärjestyksessä HTML- koodissa (z-index ei ole asetettu ja sen arvo on oletusarvo - auto). Ensimmäinen lohko on alimmalla tasolla (punainen), ja viimeinen - ylimmällä tasolla (vihreä):

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

Результат:

Esimerkki

Muutetaan asettamisjärjestystä asettamalla z-index. Punaiselle lohkolle - 3, siniselle - 2, vihreälle - 1. Asettamisjärjestys käännetään päinvastaiseksi (ylimmäksi tulee lohko, jonka 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;
}

Результат: