Een van de uitdagingen bij het gebruik van CSS-positionering voor de lay-out van webpagina's is dat sommige van uw elementen elkaar kunnen overlappen. Dit werkt prima als je wilt dat het laatste element in de HTML bovenaan staat, maar wat als je dit niet doet of als je elementen wilt hebben die elkaar op dit moment niet overlappen, omdat het ontwerp dit "gelaagde" uiterlijk vereist ? Om de manier waarop elementen elkaar overlappen te veranderen, moet u de eigenschap van CSS gebruiken.
Als u grafische hulpmiddelen in Word en PowerPoint of een meer robuuste afbeeldingseditor als Adobe Photoshop hebt gebruikt, is de kans groot dat u zoiets als z-index in actie hebt gezien. In deze programma's kunt u het (de) object (en) markeren dat u hebt getekend en een optie kiezen voor 'Naar achteren verzenden' of 'Naar voorgrond brengen' van bepaalde elementen van uw document. In Photoshop heb je deze functies niet, maar je hebt wel het deelvenster "Laag" van het programma en je kunt bepalen waar een element op het canvas valt door deze lagen opnieuw in te delen. In beide voorbeelden stel je in feite de z-index van die objecten in.
Wat is de Z-index?
Wanneer u CSS-positionering gebruikt om elementen op de pagina te plaatsen, moet u in drie dimensies denken. Er zijn de twee standaardafmetingen: links / rechts en boven / onder. De index van links naar rechts staat bekend als de x-index, terwijl de bovenste naar de onderste index de y-index is. Dit is hoe u elementen horizontaal of verticaal positioneert, met behulp van deze twee indexen.
Als het gaat om webdesign, is er ook de stapelvolgorde van de pagina. Elk element op de pagina kan boven of onder een ander element worden gelaagd. De eigenschap z-index bepaalt waar in de stapel elk element zich bevindt. Als de x-index en de y-index de horizontale en verticale lijnen zijn, is de z-index de diepte van de pagina, hoofdzakelijk de derde dimensie.
Denk aan de elementen op een webpagina als stukjes papier en de webpagina zelf als een collage. Waar u het papier neerlegt, wordt bepaald door positionering, en hoeveel daarvan wordt gedekt door de andere elementen is de z-index.
- De z-index is een getal, ofwel positief (bijvoorbeeld 100) of negatief (bijvoorbeeld -100).
- De standaard z-index is 0.
Het element met de hoogste z-index staat bovenaan, gevolgd door de volgende hoogste en zo verder tot de laagste z-index. Als twee elementen dezelfde z-indexwaarde hebben (of als deze niet is gedefinieerd, wat betekent dat de standaardwaarde 0 wordt gebruikt), zal de browser ze in de juiste volgorde plaatsen in de volgorde waarin ze in de HTML worden weergegeven.
Hoe Z-Index te gebruiken
Geef elk element dat u wilt in uw stapel een andere z-indexwaarde. Als u bijvoorbeeld vijf verschillende elementen heeft:
- element A - z-index van -25
- element B - z-index van 82
- element C - z-index niet ingesteld
- element D - z-index van 10
- element E - z-index van -3
Ze zullen in de volgende volgorde worden gestapeld:
- element B
- element D
- element C
- element E
- element A
Het wordt aanbevolen om enorm verschillende z-indexwaarden te gebruiken om uw elementen te stapelen. Op die manier, als u later meer elementen toevoegt aan de pagina, hebt u ruimte om ze in lagen te plaatsen zonder de z-indexwaarden van alle andere elementen aan te passen. Bijvoorbeeld:
- 100 voor uw hoogste element
- 0 voor je middelste element
- -100 voor uw onderste element
U kunt ook twee elementen dezelfde z-indexwaarde geven. Als deze elementen zijn gestapeld, worden ze weergegeven in de volgorde waarin ze in de HTML zijn geschreven, met het laatste element bovenaan.
Eén opmerking: voor een element om de eigenschap z-index effectief te gebruiken, moet het een element op blokniveau zijn of een weergave van "blok" of "inline-blok" in uw CSS-bestand gebruiken.
