Savybė z-index

Savybė z-index nustato, kuris elementas bus viršuje, kai keli elementai susidengia vienas su kitu.

Sintaksė

cssselektorius {
  z-index: skaičius | auto;
}

Skaičius turi būti sveikasis skaičius, teigiamas arba neigiamas. Gali būti nulis.

Reikšmės

Reikšmė	Aprašas
Skaičius	Sveikasis skaičius nustato elementų sluoksniavimo tvarką: kai elementai susidengia vienas su kitu, viršuje atsidurs tas, kurio `z-index` reikšmė didesnė.
`auto`	Sluoksniavimo tvarka kuriama automatiškai: aukščiau bus tas elementas, kuris HTML kode yra žemiau.

Numatytoji reikšmė: auto.

Pavyzdys

Šiame pavyzdyje blokai susidengs vienas su kitu pagal jų eiliškumą HTML kode (z-index nenustatytas ir turės numatytąją reikšmę - auto). Pirmasis blokas bus pačiame apačioje (raudonas), o paskutinis - viršuje (žalias):

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

Результат:

Pavyzdys

Pakeisime sluoksniavimo tvarką, nustatydami z-index. Raudonam blokui - 3, mėlynam - 2, žaliam - 1. Sluoksniavimo tvarka pasikeis atvirkščiai (viršuje bus blokas su 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;
}

Результат: