Je bezoeker klapt het menu open en de helft verdwijnt achter een afbeelding. Of een uitklapveld valt achter de volgende sectie. Op je computer werkt het prima, op een telefoon niet, en niemand snapt waarom.
Dat is bijna altijd hetzelfde probleem. Twee elementen overlappen elkaar en de verkeerde ligt bovenop.
Er bestaat een instelling die dat regelt. Hij is simpel om te begrijpen en berucht om mee te werken.
De reden daarvoor is dat hij niet altijd doet wat je verwacht. Dat leg ik hieronder uit.
Bepaalt welk element bovenop ligt als twee dingen elkaar overlappen.
Wat is z-index?
Z-index bepaalt de stapelvolgorde van elementen die elkaar overlappen. Een hoger getal ligt bovenop een lager getal.
De naam komt van de z-as. Waar x links en rechts is en y boven en onder, gaat z naar voren.
Waar je het instelt
In je opmaakcode, zie CSS. Je geeft een element een getal mee en daarmee is de volgorde bepaald.
Zonder die instelling geldt de volgorde in je code. Wat later komt, ligt bovenop.
Waar het misgaat
Bij het menu achter beeld zie ik meestal een van twee oorzaken.
Je menu heeft geen waarde meegekregen. Of het element eronder heeft er juist een hoge gekregen.
De willekeurige hoge getallen
Iemand loopt tegen dit probleem aan en zet er 9999 op. Dat werkt, tot iemand anders 99999 gebruikt.
Zo ontstaat een wedloop die niemand wint. Ik kom sites tegen met waarden van miljoenen.
Waarom het soms niet werkt
Dit is het lastige deel. Een element kan een eigen laagje vormen waarbinnen de getallen gelden.
Ligt dat hele laagje onder een ander laagje, dan helpt een hoog getal binnenin niet. Je vecht dan tegen de verkeerde grens.
Wanneer zo’n laagje ontstaat
Bij bepaalde instellingen, zoals doorzichtigheid, een filter of een verplaatsing. Die maken van een element een eigen wereldje.
Dat is werk voor je bouwer om uit te zoeken. Het verklaart wel waarom een hoger getal soms niets uithaalt.
Hoe je het ordelijk houdt
Werk met vaste stappen
10 voor elementen die net boven de inhoud liggen.
100 voor een meescrollend menu.
1000 voor een uitklapmenu of zoekbalk.
10000 voor een schermvullend venster.
Met zulke vaste waarden houd je overzicht. Er is dan altijd ruimte tussen twee niveaus.
Leg ze een keer vast
Net als je kleuren en je afstanden. Dan hoeft niemand meer te gokken en ontstaat er geen wedloop.
Dat scheelt bij elke uitbreiding gedoe, zie frontend.
Waar het vaak speelt
Bij een vastgezette balk die over je inhoud schuift, zie sticky.
En bij een venster dat over je pagina valt, zie modal. Die twee vechten regelmatig met elkaar.
Let op je toetsenbord
Een element dat bovenop ligt, kan een link eronder onbereikbaar maken. Ook als je hem nog wel ziet.
Test dat met de tabtoets, zie accessibility. Wat visueel klopt, hoeft in de volgorde niet te kloppen.
Blijf niet ophogen
Werkt een hoger getal niet, dan zit het probleem ergens anders. Nog hoger gaan lost dat niet op.
Laat je bouwer dan kijken welk element een eigen laagje vormt. Dat is de echte oorzaak.
Waarden vastleggen
Doe dat samen met je kleuren en je afstanden. Dan hoeft niemand meer te gokken.
Zo voorkom je een wedloop van steeds hogere getallen. Ik kom sites tegen met waarden van miljoenen.
Test met je toetsenbord
Een element dat bovenop ligt, kan een link eronder onbereikbaar maken. Ook als je die link nog gewoon ziet.
Met een muis merk je dat nooit. Loop je pagina dus een keer door met de tabtoets, zie UI.
Meer vragen over Z-index
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is z-index?
Waarom verdwijnt mijn menu achter een afbeelding?
Welke waarden gebruik je voor z-index?
Waarom werkt mijn z-index niet?
Wat is een stacking context?
Hoe voorkom je problemen met z-index?
Wat is z-index?
Meestal door een van twee oorzaken.
Je menu heeft geen waarde meegekregen, of het element eronder heeft er juist een hoge gekregen zonder goede reden.
Dat tweede zie ik vaak. Iemand loopt tegen een probleem aan en zet er 9999 op.
Dat werkt, tot iemand anders 99999 gebruikt.
Zo ontstaat een wedloop die niemand wint. Ik kom sites tegen met waarden van miljoenen, en dan is er geen beginnen meer aan om het netjes te krijgen.
Meld het gewoon als je dit ziet, want het is meestal in tien minuten opgelost.
Let erop dat het per schermbreedte kan verschillen. Op je computer klopt het soms wel en op een telefoon niet. Meestal heeft je menu geen waarde meegekregen, of heeft het element eronder er juist een hoge gekregen zonder reden. Let erop dat je bouwer kijkt naar beide kanten: het element dat weg valt en het element dat er overheen ligt.
Waarom verdwijnt mijn menu achter een afbeelding?
Z-index bepaalt de stapelvolgorde van elementen die elkaar overlappen. Een hoger getal ligt bovenop een lager getal.
De naam komt van de z-as. Waar x links en rechts is en y boven en onder, gaat z naar voren en naar achteren.
Je stelt het in je opmaakcode in. Je geeft een element een getal mee en daarmee is de volgorde bepaald.
Zonder die instelling geldt gewoon de volgorde in je code: wat later komt, ligt bovenop.
Het klinkt simpel en het is berucht om mee te werken. De reden is dat het niet altijd doet wat je verwacht.
Je stelt dit zelf niet in, dat doet je bouwer in de opmaakcode.
Het verklaart wel waarom je menu soms achter een afbeelding valt. Twee elementen overlappen en de verkeerde ligt bovenop. Een hoger getal ligt bovenop een lager getal. Zonder instelling geldt de volgorde in je code: wat later komt, ligt bovenop.
Waarom werkt mijn z-index niet?
Omdat een element een eigen laagje kan vormen waarbinnen de getallen gelden.
Ligt dat hele laagje onder een ander laagje, dan helpt een hoog getal binnenin niet. Je vecht dan tegen de verkeerde grens.
Zo’n laagje ontstaat bij bepaalde instellingen, zoals doorzichtigheid, een filter of een verplaatsing. Die maken van een element een eigen wereldje.
Dat is werk voor je bouwer om uit te zoeken.
Het verklaart wel waarom een hoger getal soms helemaal niets uithaalt. Blijf dan niet ophogen, want dat lost het probleem niet op.
Laat je bouwer kijken welk element een eigen laagje vormt als een hoger getal niet helpt.
Blijf niet ophogen, want dat lost het probleem niet op. Je vecht dan tegen de verkeerde grens. Een element kan namelijk een eigen laagje vormen waarbinnen de getallen gelden. Ligt dat laagje onderop, dan helpt een hoog getal binnenin niet. Zo’n laagje ontstaat bij instellingen als doorzichtigheid, een filter of een verplaatsing. Dat is werk voor je bouwer om uit te zoeken.
Welke waarden gebruik je voor z-index?
Werk met vaste stappen in plaats van willekeurige getallen.
Ik houd deze aan: 10 voor elementen die net boven de inhoud liggen. 100 voor een meescrollend menu. 1000 voor een uitklapmenu of zoekbalk.
En 10000 voor een schermvullend venster.
Met zulke stappen houd je overzicht en is er altijd ruimte tussen twee niveaus.
Leg ze een keer vast, net als je kleuren en je afstanden. Dan hoeft niemand meer te gokken en ontstaat er geen wedloop van steeds hogere getallen.
Vraag of er vaste waarden zijn afgesproken in plaats van willekeurige getallen.
Met stappen als 10, 100, 1000 en 10000 houd je overzicht. Er is dan altijd ruimte tussen twee niveaus. Zo voorkom je de wedloop waarbij iemand 9999 gebruikt en de volgende 99999. Ik kom sites tegen met waarden van miljoenen. Leg die waarden vast bij je andere afspraken, net als je kleuren en je afstanden. Dan hoeft niemand meer te gokken.
Hoe voorkom je problemen met z-index?
Door vaste waarden af te spreken en die vast te leggen bij je andere afspraken.
Het speelt vooral bij een vastgezette balk die over je inhoud schuift en bij een venster dat over je pagina valt. Die twee vechten regelmatig met elkaar.
Let daarnaast op je toetsenbord. Een element dat bovenop ligt, kan een link eronder onbereikbaar maken.
Ook als je die link nog gewoon ziet staan.
Test dat dus met de tabtoets. Wat visueel klopt, hoeft in de volgorde niet te kloppen, en dat merk je met een muis nooit.
Leg je waarden een keer vast, net als je kleuren en je afstanden.
Test daarna met de tabtoets of alles bereikbaar blijft. Een element dat bovenop ligt, kan een link eronder blokkeren zonder dat je het ziet. Het speelt vooral bij een vastgezette balk en bij een venster dat over je pagina valt. Die twee vechten regelmatig met elkaar.
Valt je menu achter een afbeelding of werkt een uitklapveld niet goed op mobiel? Stuur me de link via het formulier hieronder. Ik kijk waar de stapelvolgorde misgaat en wat er nodig is om het op te lossen. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Stapelvolgorde, laagvolgorde, z-as
