Za co odpovídá vlastnost z-index v CSS?

Vlastnost z-index v CSS řídí pořadí vrstvení pozicovaných prvků podél osy Z. Prvky s vyšší hodnotou z-index jsou umístěny nad prvky s nižší hodnotou.

Klíčové body:

• Platí pouze pro pozicované prvky (position: relative, absolute, fixed, sticky).
• Hodnota může být číslo (kladné, záporné nebo nula).
• Automatická hodnota (auto) odpovídá pořadí v DOM stromu.
• Záporné hodnoty z-index mohou umístit prvek pod rodičovský prvek a jeho obsah.
• z-index vytváří kontext vrstvení (stacking context). Prvky uvnitř stejného kontextu jsou řazeny podle z-index, ale celý kontext se chová jako jedna jednotka vzhledem k jiným kontextům.

Výchozí pořadí vrstvení (bez z-index):

1. Pozadí a rámečky kořenového prvku.
2. Pozicované prvky s záporným z-index.
3. Blokové prvky v normálním toku.
4. Float prvky.
5. Inline prvky v normálním toku.
6. Pozicované prvky s z-index: auto nebo z-index: 0.
7. Pozicované prvky s kladným z-index.

Příklad:

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

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Nahoře */
}

.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 případě bude červený blok (z-index: 1) nad modrým (z-index: 0).