Terug naar begrippenlijst
Z-index
Stel je voor: je hebt meerdere elementen op een website, zoals knoppen, afbeeldingen en menu’s, en ze overlappen elkaar. Hoe bepaal je dan welk element bovenaan ligt? Daar komt de CSS-eigenschap Z-index om de hoek kijken. Het is als het ware de “laagvolgorde” van je elementen – degene met het hoogste getal ligt het meest bovenop.
Inhoudsopgave
De Z-index bepaalt wie wint in de stapel
Z-index is de manier waarop CSS bepaalt welk element bovenop een ander moet liggen als ze elkaar overlappen. Elementen zonder Z-index of met een lagere waarde verdwijnen achter elementen met een hogere waarde. Simpel gezegd: hoe hoger het getal, hoe dichter bij de “voorgrond”.
Wanneer komt Z-index écht van pas?
Je hebt Z-index nodig in situaties waarin elementen elkaar letterlijk in de weg kunnen zitten. Denk aan een minimalistisch menu dat over een afbeelding heen moet schuiven, een pop-up die boven alle andere content moet verschijnen, of een sticky header die altijd zichtbaar moet blijven. Zonder een goede Z-index kun je zomaar eindigen met een knop die verscholen zit achter een afbeelding – en niemand die ’m ooit ziet.
Waarom doet Z-index soms… helemaal niks?
Misschien herken je het: je hebt netjes een Z-index ingesteld, maar toch gebeurt er niks. Frustrerend! Dat komt omdat Z-index alleen werkt als een element een bepaalde positionering heeft. Je moet het element eerst een position: relative, absolute, fixed of sticky geven. Zonder zo’n ‘position’, kijkt de browser niet eens naar je Z-index.
Stapelen maar: Z-index in de praktijk
Stel, je hebt een afbeelding en daarboven wil je een knop plaatsen. Je zorgt er dan voor dat beide elementen gepositioneerd zijn (bijvoorbeeld met absolute of relative) en geeft de knop een hogere Z-index dan de afbeelding. Voilà: de knop ligt keurig bovenop. Z-index gebruik je dus vooral om de zichtbaarheid van elementen slim te sturen. Als je dit goed beheerst, heb je meer controle over het uiterlijk van je website dan je denkt.
Samengevat: Wie de hoogste Z-index heeft, wint
Z-index is een krachtige, maar soms verwarrende eigenschap. Zodra je snapt dat het draait om laagvolgorde + positionering, valt alles op z’n plek. Het is een van de CSS-tools die je webdesign echt naar een hoger niveau tillen – mits je ‘m goed gebruikt.
Veelgestelde vragen
Nee, zonder position: relative, absolute, fixed of sticky negeert de browser je Z-index compleet.
Dat is auto, wat meestal overeenkomt met nul, tenzij het onderdeel is van een speciale stacking context.
Jazeker! Daarmee duw je een element achter andere elementen, al moet je opletten dat het niet volledig uit beeld verdwijnt.
Check of het element wel een geldige position heeft. Kijk ook of een ouder-element misschien een nieuwe ‘stacking context’ heeft door eigenschappen zoals opacity of transform.
Stan Classens Front-end developer
