Z-index
Hoe werkt z-index, zowel qua instellingen van je builder, als met CSS. Ook komt aan bod waarom z-index soms niet lijkt te werken, of in ieder geval niet zoals jij denkt dat het had moeten werken… en hoe je veel voorkomende fouten kunt vermijden.
Wat doet z-index?
Z-index wordt gebruikt om de z-volgorde van gepositioneerde HTML-elementen te regelen. Het reguleert de gestapelde lagen van HTML-elementen. Om te bepalen welk object (welke laag) boven of onder een ander object (laag) komt, stel je het z-index attribuut van je element of blok in met een getal.
Hoe gebruik je de z-index
Een element of blok zonder ingestelde z-index gedraagt zich als z-index 0. De rangorde ‘wat over wat heengaat’ wordt bepaald door de opbouw van de pagina (daarover verderop meer). Door het aanpassen van de z-index kun je daarvan afwijken. Een blok met een z-index van 2 ligt bovenop een blok met z-index 1. Ook kun je elementen en bloks een negatieve z-index geven. Zie de illustratie hieronder.
Z-index werkt niet op elk element of blok
Gepositioneerd als relatief, absoluut of vast
Elk blok of element heeft een CSS positie kenmerk. In meerdere builders heet die tab ook ‘positie’. De posities zijn:
- default (standaard voor dat blok of element)
- statisch
- relatief
- absoluut
- vast (fixed)
- sticky
Deze posities kun je onderverdelen in 2 soorten:
- Positie ten opzichte van de lay-out
- Positie ten opzichte van het browser venster
Positie ten opzichte van de lay-out
- relatief
- absoluut
zijn positioneringen binnen je lay-out.
Alleen bij deze posities heeft z-index effect.
Alleen bij deze posities heeft z-index effect.
Positie ten opzichte van browser venster
- statisch
- fixed
- sticky
zijn positioneringen ten opzichte van je browser venster (canvas).
Hier heeft het gebruik van z-index geen enkel effect.
Hier heeft het gebruik van z-index geen enkel effect.
Z-index: volgorde van elementen, de ouder en transform
Voordat we verder gaan met de details; er zijn enkele factoren om rekening mee te houden. Ze zijn niet moeilijk, maar wel belangrijk.
Volgorde van elementen
Ook als je qua z-index niets hebt ingesteld, zijn er elementen of bloks die automatisch bovenop, of onderop getoond worden; dat komt door de volgorde binnen de pagina.
Stel dat je eerst een tekst vertoont op je pagina. Daar vlak onder staat de HTML (blok of element) en die geeft je een negatieve margin. Dat betekent dat er een overlap gaat plaatsvinden. Maar welke komt nu onder, en welke boven? De nieuwe in de volgorde komt automatisch bovenop de eerdere. Dus van boven naar beneden heeft de ‘nieuwe’ steeds voorrang qua zichtbaarheid. Tenzij er sprake is van een ingestelde z-index, maar daar komen we straks op.
Stel dat je eerst een tekst vertoont op je pagina. Daar vlak onder staat de HTML (blok of element) en die geeft je een negatieve margin. Dat betekent dat er een overlap gaat plaatsvinden. Maar welke komt nu onder, en welke boven? De nieuwe in de volgorde komt automatisch bovenop de eerdere. Dus van boven naar beneden heeft de ‘nieuwe’ steeds voorrang qua zichtbaarheid. Tenzij er sprake is van een ingestelde z-index, maar daar komen we straks op.
Ouder en kind
Ook binnen elementen en bloks is er sprake van ouder en kind. Als je een kolom of container plaatst, met daarin een heading en een paragraaf tekst, zijn de heading en paragraaf tekst het kind van de kolom of container. Dat betekent dat als de ouder een z-index heeft die het onder een ander element of blok plaatst, de kinderen nooit hoger kunnen dan dat. Dit wil niet zeggen dat het gebruik van z-index bij de kinderen geen zin heeft; z-index werkt uitstekend qua rangorde binnen de ouder. Dit kun je vergelijken met een gezin: de kinderen zijn afhankelijk van de positie/rangorde van de ouder(s). Maar de kinderen onderling hebben wel degelijk een rangorde.
Transformaties
Transformaties verstoren de natuurlijke stapelvolgorde. Met transformatie bedoel ik CSS transformaties, zoals de transform of opacity functies. Zodra een blok of element een transformatie heeft, gedraagt dit zich als z-index 0. Dat betekent dat je vaak de z-index moet gaan instellen, om te zorgen dat het zich gedraagt zoals je het bedoelde. Dit is ook het geval, als de transformatie gebeurt middels een class.
Heb je z-index problemen?
Hou je aan deze volgorde om z-index problemen op te sporen en te verhelpen:
- Controleer of er een positie is ingesteld, welke, en of de z-index qua volgorde klopt.
- Zorg ervoor dat er geen bovenliggende (ouder) elementen zijn die het z-index niveau van de onderliggende elementen beperken.
Z-index is heel belangrijk
Het bepaalt welk object (blok of element) qua zichtbaarheid voorrang heeft op een ander. Welke ‘over’ de ander heen mag, of juist eronder.
Test op meerdere breedtes
Test je website altijd met meerdere venster breedtes en op meerdere apparaten om te kijken of alles goed gaat, ook qua z-index. Want juist bij een smaller wordend venster, wordt goed zichtbaar wat er allemaal fout kan gaan.
