Hoe voorkom je problemen met z-index?
Problemen met z-index voorkom je vooral met afspraken, niet met techniek.
Bijna elke fout ontstaat doordat niemand overzicht heeft.
Vier gewoontes houden dat overzicht in stand.
Spreek een reeks af
Leg vast welke waarden je gebruikt en waarvoor. Zet ze bovenin je stijlbestand met een naam erbij.
Meer daarover lees je bij welke waarden je gebruikt.
Open zo min mogelijk lagen
Zet geen doorzichtigheid of filter op een blok als je het effect ook op het onderdeel zelf kunt zetten.
Meer daarover lees je bij een stacking context.
Zet pop-ups apart
Plaats meldingen en pop-ups helemaal onderaan in je code, buiten je paginablokken. Dan liggen ze altijd bovenop.
Meer daarover lees je bij modal.
Mijn vier gewoontes
- Een vaste reeks met benoemde waarden.
- Nooit hoger dan duizend.
- Pop-ups buiten de paginastructuur.
- Bij elke nieuwe waarde controleren wat er al bestaat.
Die laatste gewoonte kost een halve minuut en voorkomt de wedloop naar steeds hogere getallen.
Test met alles aan
Cookiemelding, chatvenster en uitschuifmenu tegelijk. Juist die combinatie legt de fouten bloot.
Meer daarover lees je bij accessibility.
Test ook op mobiel
Een vast menu en een uitschuifmenu gedragen zich daar anders dan op een breed scherm.
Meer daarover lees je bij sticky.
Wat ik in de praktijk zie misgaan
Het getal wordt telkens hoger gezet tot het werkt, en dat is geen oplossing maar uitstel.
Ik kom sites tegen waar het hoogste getal in de tienduizenden loopt. Dat is altijd hetzelfde verhaal: er zat iets voor een menu, iemand heeft er een hoger getal op gezet, later zat er weer iets voor, en zo is het opgelopen. Op een gegeven moment zit alles op maximaal en heb je geen ruimte meer om iets bovenop te zetten.
De echte oorzaak is bijna nooit het getal zelf, maar een element daarboven dat een eigen laagcontext maakt. Dan doet je hoge waarde binnen dat blokje niets meer.
Wat ik daarom aanhoud is een korte afgesproken reeks met flinke stappen ertussen, opgeschreven op één plek, en pop-ups die niet ergens diep in de pagina staan maar helemaal onderaan de code.
Dan is er ruimte om iets tussen te schuiven zonder alles te herzien.
Meer daarover lees je bij z-index.