Na čo je zodpovedná vlastnosť z-index v CSS?

Vlastnosť z-index v CSS riadi poradie vrstvenia pozicovaných prvkov pozdĺž osi Z. Prvky s vyššou hodnotou z-index sú umiestnené nad prvkami s nižšou hodnotou.

Kľúčové body:

• Platí iba pre pozicované prvky (position: relative, absolute, fixed, sticky).
• Hodnota môže byť číslo (kladné, záporné alebo nula).
• Automatická hodnota (auto) zodpovedá poradiu v DOM strome.
• Záporné hodnoty z-index môžu umiestniť prvok pod rodičovský prvok a jeho obsah.
• z-index vytvára kontext vrstvenia (stacking context). Prvky v tom istom kontexte sú zoradené podľa z-index, ale celý kontext sa správa ako jedna jednotka voči iným kontextom.

Predvolený poradie vrstvenia (bez z-index):

1. Pozadie a okraje koreňového prvku.
2. Pozicované prvky so záporným z-index.
3. Blokové prvky v normálnom toku.
4. Float prvky.
5. Inline prvky v normálnom toku.
6. Pozicované prvky s z-index: auto alebo z-index: 0.
7. Pozicované prvky s kladným z-index.

Príklad:

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

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Nad modrým */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Pod červeným */
}

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

V tomto prípade bude červený blok (z-index: 1) nad modrým (z-index: 0).