Kuo atsakinga z-index savybė CSS?

CSS z-index savybė valdo sluoksnių tvarką pozicionuotų elementų Z ašyje. Didesnę z-index reikšmę turintys elementai yra virš mažesnę reikšmę turinčių elementų.

Pagrindiniai punktai:

• Taikoma tik pozicionuotiems elementams (position: relative, position: absolute, position: fixed, position: sticky).
• Reikšmė gali būti skaičius (teigiamas, neigiamas arba nulis).
• Automatinė reikšmė (auto) atitinka DOM medžio tvarką.
• Neigiamas z-index gali padėti elementą po tėvinio elemento ir jo turinio.
• z-index sukuria sluoksnių kontekstą (stacking context). Elementai tame pačiame kontekste yra išrikiuojami pagal savo z-index, tačiau visas kontekstas elgiasi kaip vienetas kitų kontekstų atžvilgiu.

Numatytoji sluoksnių tvarka (be z-index):

1. Pagrindinio elemento fonas ir rėmeliai.
2. Neigiamą z-index turintys pozicionuoti elementai.
3. Blokiniai elementai įprastoje srauto eilėje.
4. Plaukiojantys elementai (float).
5. Eilutės elementai įprastoje srauto eilėje.
6. Pozicionuoti elementai su z-index: auto arba z-index: 0.
7. Pozicionuoti elementai su teigiamu z-index.

Pavyzdys:

/* style.css */
.box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Bus virš mėlynos */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Bus žemiau raudonos */
}

<!-- index.html -->
<div class="box red"></div>
<div class="box blue"></div>

Šiuo atveju, raudonas blokas (z-index: 1) bus virš mėlyno bloko (z-index: 0).