Mille eest vastutab z-index omadus CSS-is?

CSS z-index omadus kontrollib kihistamise järjekorda positsioneeritud elementide Z-teljel. Suurem z-index väärtus asetab elemendid suurema väärtusega elementide ette.

Põhipunktid:

• Kehtib ainult positsioneeritud elementidele (position: relative, position: absolute, position: fixed, position: sticky).
• Väärtus võib olla number (positiivne, negatiivne või null).
• Automaatne väärtus (auto) vastab DOM-i puu järjekorrale.
• Negatiivsed z-index väärtused võivad panna elemendi alla vanemelemendist ja selle sisust.
• z-index loob kihistamise konteksti (stacking context). Sarnases kontekstis olevad elemendid järjestatakse nende z-index väärtuste järgi, kuid kogu kontekst käitub nagu üksus teiste kontekstide suhtes.

Vaikimisi kihistamise järjekord (ilma z-index-ita):

1. Põhja ja raamide taust.
2. Negatiivse z-index-iga positsioneeritud elemendid.
3. Blokeelemendid normaalses voos.
4. Ujuvad elemendid (float).
5. Ridaelemendid normaalses voos.
6. Positsioneeritud elemendid z-index: auto või z-index: 0.
7. Positsioneeritud elemendid positiivse z-index-iga.

Näide:

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

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* On üle sinise */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* On allpool punast */
}

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

Selles näites asub punane kast (z-index: 1) üle sinise kast (z-index: 0).