Mis on z-index ja kuidas seda kasutatakse veebiarenduses?

z-index — on CSS omadus, mis määrab elementide kihistamise järjekorra (stacking) nende Z-telje positsiooni põhjal. Suurema z-index väärtusega elemendid kuvatakse väiksema väärtusega elementide kohal.

Seda kasutatakse elementide, millel on positsioneerimine (st, position omadus on väärtusi, mis erinevad static-ist), kihistamise sügavuse haldamiseks: relative, absolute, fixed, sticky.

Peamised kasutuspunktid:

• Statilise positsiooniga elemendid (position: static;) ei osale kihistamise kontekstis ja ignoreerivad z-index-i.
• z-index väärtus kehtib ainult elementidele, mis loovad uue kihistamise konteksti. See kontekst luuakse näiteks kasutades position väärtusi, mis ei ole static, või rakendades muid CSS reegleid (nt opacity < 1).
• Samas kihistamise kontekstis paiknevad suurema z-index-iga elemendid kõrgemal.
• Alamlaste kihistamise kontekstid on nagu üks tervik vanemkontekstis.
• Kui z-index ei ole määratud, määrab kihistamise järjekorra DOM-i elementide järjekord.

Näide kasutamisest:

.box1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2; /* Peal .box2 */
}

.box2 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1; /* Allpool .box1 */
}