CSS - Z-index, bepaalde de volgorde


Tijdens de bouw van een website kan het zo gebeuren dat twee verschillende lagen over elkaar heen komen te liggen en hierbij kan z-index helpen. Door in de CSS z-index te gebruiken geef je aan welke laag dan bovenop moet liggen en welke laag onderop. Hoe lager het getal hoe lager de laag ligt. Dus een laag met als waarde 2 ligt dus logischerwijs altijd hoger dan een laag met als waarde 1. Het bepalen van de volgorde op deze manier werkt alleen met lagen die gepositioneerd zijn (position:absolute; of position:relative;).

Lagen zonder z-index hebben standaard de waarde 0. Daarnaast kun je ook negatieve waardes gebruiken zoals -1. Dit wil dan zeggen dat de laag onder alle andere lagen komt.

De code met z-index erin verwerkt hieronder. Een voorbeeld zie je door hier te klikken.

.laag1 {
        position: absolute;
        width: 662px;
        height: 105px;
        z-index: 1;
}

.laag2 {
        position: absolute;
        width: 105px;
        height: 662px;
        z-index: 2;
}