Waarom werkt mijn z-index niet?
Dat werkt mijn z-index niet is een klacht met twee mogelijke oorzaken.
Beide zijn goed te herkennen.
De eerste komt veruit het vaakst voor.
Oorzaak één: geen positie
De waarde telt alleen bij een element dat verschoven, vastgezet of zwevend is geplaatst. Staat het gewoon in de tekststroom, dan gebeurt er niets.
Meer daarover lees je bij css.
Hoe je dat oplost
Geef het element een relatieve positie. Dat verandert niets aan de plek op je pagina, maar activeert wel de laagvolgorde.
Meer daarover lees je bij wat z-index is.
Oorzaak twee: een opgesloten laag
Een omliggend blok vormt zelf een laag. Binnen dat blok werkt je waarde wel, maar het blok blijft onder zijn buren.
Meer daarover lees je bij een stacking context.
Zo zoek je het uit
- Inspecteer het element in je browser.
- Controleer of er een positie is ingesteld.
- Loop omhoog langs de omliggende blokken.
- Zoek naar doorzichtigheid, verschuiving of een filter.
Stap twee kost drie seconden en verklaart de meeste gevallen meteen.
Wat je vooral niet moet doen
De waarde blijven verhogen. Als tien niet werkt, werkt honderdduizend ook niet.
Meer daarover lees je bij welke waarden je gebruikt.
In een paginabouwer
Sommige bouwers zetten hun eigen waarde erover heen. Dan help je jezelf met een regel maatwerk-css.
Meer daarover lees je bij frontend.