Wat is z-index?

Wat is z-index? Het is de instelling die bepaalt welk element bovenop ligt als twee dingen elkaar overlappen.

Een hoger getal ligt dichter bij de bezoeker.

Denk aan losse vellen papier op een bureau.

Waar de naam vandaan komt

Een scherm heeft een breedte en een hoogte, de x en de y. De diepte heet dan de z.

Meer daarover lees je bij css.

Wanneer je het nodig hebt

Bij een vast menu, een pop-up of een melding die over de rest van de pagina heen moet vallen.

Meer daarover lees je bij modal.

Wanneer het niets doet

Bij een element dat gewoon in de tekststroom staat. Er moet eerst een positie zijn ingesteld.

Meer daarover lees je bij waarom het soms niet werkt.

De basisregels

1. Hoger getal ligt bovenop.
2. Bij een gelijk getal wint het element dat later in de code staat.
3. Zonder positie gebeurt er niets.
4. Negatieve waarden liggen achter de rest.

Regel drie verklaart bijna elke melding die ik hierover krijg.

Waar het vaak misgaat

Bij een vast menu dat achter een afbeelding verdwijnt. Zo goed als altijd is er een laag omheen die de boel opsluit.

Meer daarover lees je bij een stacking context.

Hoe je het bekijkt

Klik met de rechtermuisknop op een element en kies Inspecteren. Daar zie je welke waarde er staat.

Meer daarover lees je bij frontend.

Veelgestelde vragen hierover