Werken met z-index

Z-index is een handige functie in css waarmee je elementen kunt stapelen. Je kunt dus met verschillende lagen werken (zoals in photoshop met layers). Z-index moet een getal als waarde hebben. Dit getal mag positief zijn, maar ook negatief. Hoe hoger het getal, hoe hoger de laag ligt. Hoe lager het getal, hoe lager hij ligt. Klinkt logisch toch? Als er geen waarde is toegewezen heeft hij standaard de waarde 0.

Je kan z-index op twee verschillende manieren gebruiken. We zullen beginnen met de eerste manier waarbij bijvoorbeeld een div absoluut gepositioneerd word.

Z-index - absoluut gepositioneerd

We veronderstellen dat we twee div elementen hebben en we willen ze op elkaar krijgen. We noemen ze layer1 en layer2.

.layer1 {
position:absolute;
height:100px;
width:200px;
}

.layer2 {
position:absolute;
z-index:1;
height:200px;
width:100px;
}

Layer1 heeft z-index 0 (standaard waarde), en layer2 z-index 1. Dus layer2 ligt nu boven op layer1.

Een extra tip
Als je een element absoluut gepositioneerd hebt staat die altijd in de linker bovenhoek van de pagina. Als je dit wil voorkomen moet je hem in een aparte div zetten die relatief gepositioneerd is. Dan zal hij zeker binnen die div blijven.

Z-index - relatief gepositioneerd

Nu zullen we twee div elementen stapelen door één van de twee relatief te positioneren. Om te beginnen zetten we gewoon twee div’s onder elkaar. Layer2 wordt relatief gepositioneerd en we geven hem als z-index waarde 1.

<div class="layer1"></div>
<div class="layer2"></div>

.layer1 {
width:100px;
height:100px;
}
 
.layer2 {
width:100px;
height:100px;
position:relative;
z-index:1;
}

Als je dit geprobeerd hebt zie je dat ze nog altijd onder elkaar staan. Dit komt omdat we layer2 nog moeten vertellen waar hij moet staan. We zullen hem boven layer1 zetten d.m.v. een negatieve top waarde. We trekken hem dus als het ware naar boven.

.layer2 {
width:100px;
height:100px;
position:relative;
top:-50px;
}

We zien dus dat je met z-index veel kan bereiken. Als je werkt met relatief gepositioneerde elementen kan je een element plaatsen ten opzichte van zijn oorspronkelijke plaats. Met absoluut gepositioneerde elementen kan je ze plaatsen ten opzichte van de pagina of een div (die relatief gepositioneerd is).