Par ko atbild z-index īpašība CSS?

CSS z-index īpašība kontrolē slāņu secību pozicionētos elementus Z asi. Elementi ar lielāku z-index vērtību atrodas virs elementiem ar mazāku vērtību.

Galvenie punkti:

• Tiek piemērots tikai pozicionētiem elementiem (position: relative, position: absolute, position: fixed, position: sticky).
• Vērtība var būt skaitlis (pozitīvs, negatīvs vai nulle).
• Automātiskā vērtība (auto) atbilst DOM koka secībai.
• Negatīvas z-index vērtības var novietot elementu zem vecāka elementa un tā satura.
• z-index rada slāņu kontekstu (stacking context). Elementi tajā pašā kontekstā tiek sakārtoti pēc sava z-index, bet visas konteksta kopā uzvedas kā vienots veselums attiecībā uz citiem kontekstiem.

Noklusējuma slāņu secība (bez z-index):

1. Pamatkoka fons un rāmji.
2. Pozicionēti elementi ar negatīvu z-index.
3. Blokveida elementi normālā plūsmā.
4. Pludiņi (float).
5. Rindas elementi normālā plūsmā.
6. Pozicionēti elementi ar z-index: auto vai z-index: 0.
7. Pozicionēti elementi ar pozitīvu z-index.

Piemērs:

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

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Būs virs zila */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Būs zem raudonas */
}

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

Šajā gadījumā, sarkanā bloka (z-index: 1) būs virs zilā (z-index: 0).