Z-index

Zodra je een element uit de flow haalt, kan het een ander element overlappen. z-index bepaalt wie bovenaan ligt.

Zonder dat je iets doet, stapelt de browser zo:

1. elementen met een negatieve z-index
2. elementen zonder position (of met position: static)
3. elementen met een position en een z-index van 0 of hoger

Binnen dezelfde groep wint wie later in je HTML staat.

z-index werkt alleen op gepositioneerde elementen

Zet je z-index op een element met position: static, dan doet het niets. Dat is de eerste plek om te kijken als je z-index niet werkt.

.badge {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    z-index: 1;
}

Hoger getal ligt dichter bij je. Negatief ligt achter de rest. De standaardwaarde is auto.

De nummers hoeven elkaar niet op te volgen. 1, 10 en 100 werken even goed als 1, 2 en 3.

Stacking context

Een element met een z-index maakt een eigen stapel voor zijn kinderen. Alles binnen dat element wordt eerst onderling gestapeld, en dan als geheel ergens tussen de rest gezet.

<div id="div1"></div>
<div id="div2"></div>
<div id="div3">
    <div id="div4"></div>
    <div id="div5"></div>
    <div id="div6"></div>
</div>

Stel: div1 heeft z-index: 5, div2 heeft 2, div3 heeft 4. Daarbinnen heeft div4z-index: 6, div5 heeft 1 en div6 heeft 3.

De browser stapelt eerst de buitenste: div1 ligt bovenaan, dan div3, dan div2.

Daarna de kinderen, binnen div3: div4, dan div6, dan div5.

div4 heeft z-index: 6, hoger dan div1. Toch ligt het eronder, want het zit opgesloten in de stapel van div3.

De zes waarden staan bovenaan de stylesheet. De labels in de tekening lezen ze uit, dus die volgen mee zodra je iets wijzigt.

• geef div4 de waarde 100. Komt het boven div1?
• zet de z-index van div3 op auto. Wat gebeurt er nu met div4?

💡 Een menu dat achter de rest verdwijnt

Je zet z-index: 9999 en het helpt niet. De oorzaak is bijna altijd een ouder die een eigen stacking context maakt.