Waarvoor is de eigenschap z-index in CSS verantwoordelijk?

De eigenschap z-index in CSS regelt de stapelvolgorde van gepositioneerde elementen langs de Z-as. Elementen met een hogere z-index-waarde worden boven die met een lagere waarde geplaatst.

Belangrijke punten:

• Alleen van toepassing op gepositioneerde elementen (position: relative, absolute, fixed, sticky).
• De waarde kan een getal zijn (positief, negatief of nul).
• De automatische waarde (auto) komt overeen met de volgorde in de DOM-structuur.
• Negatieve z-index-waarden kunnen een element onder de ouder en de inhoud ervan plaatsen.
• z-index creëert een stapelcontext (stacking context). Elementen binnen dezelfde context worden gesorteerd op hun z-index, maar de hele context gedraagt zich als één geheel ten opzichte van andere contexten.

Standaard stapelvolgorde (zonder z-index):

1. Achtergrond en randen van het root-element.
2. Gepositioneerde elementen met negatieve z-index.
3. Blok-elementen in de normale stroom.
4. Zwevende elementen (float).
5. Inline-elementen in de normale stroom.
6. Gepositioneerde elementen met z-index: auto of z-index: 0.
7. Gepositioneerde elementen met positieve z-index.

Voorbeeld:

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

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Boven blauw */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Onder rood */
}

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

In dit geval ligt het rode blok (z-index: 1) boven het blauwe blok (z-index: 0).