Z-index is een CSS-eigenschap die bepaalt welk element bovenop ligt als twee of meer elementen elkaar overlappen op een pagina. Hogere getallen komen naar voren, lagere zakken naar achteren. Het regelt de diepte, de volgorde van voor naar achter, en niet links, rechts, boven of onder.
Stel je een stapel papier op een bureau voor. Het vel dat je als laatste neerlegt, komt bovenop en verbergt wat eronder ligt. Z-index doet precies dat met lagen op een scherm: een dropdownmenu, een cookiebanner of een lightbox hebben allemaal een hoge waarde nodig zodat ze boven de gewone content verschijnen in plaats van erachter te verdwijnen. Een sticky navigatiebalk die bovenaan blijft staan terwijl je scrolt, leunt er ook op om boven al het andere te zweven.
En dan het stukje waar mensen op vastlopen. Z-index werkt alleen op elementen met een position, en het werkt binnen iets dat een stacking context heet. Een kind-element kan dus nooit boven een buur van zijn ouder uitkomen, hoe groot zijn getal ook is. Een z-index van 9999 ziet er machtig uit maar doet niks als het element eronder in een aparte context zit. Dat kwartje snappen scheelt het verschil tussen een snelle fix en code die steeds opnieuw breekt. Dit is een van de meest voorkomende bugs in dagelijks front-end-werk. Een modal opent, maar schuift achter de navigatiebalk. Een tooltip verdwijnt onder de volgende kaart. Negen van de tien keer is de oplossing geen groter getal, maar een kleinere, vooraf bedachte set lagen. Veel teams houden een korte schaal aan, bijvoorbeeld 10 voor headers, 100 voor dropdowns en 1000 voor modals, zodat iedereen naar dezelfde waardes grijpt in plaats van steeds nieuwe te verzinnen.
Bij TopDevs plannen we de stapelvolgorde bewust in onze CSS, zodat menus, modals en overlays altijd in de juiste laag belanden in plaats van met steeds grotere getallen tegen elkaar te vechten.
