De z-index eigenschap in CSS wordt gebruikt om de stapelvolgorde van de elementen te specificeren. Een element met een grotere z-index waarde wordt bovenop een element met een lagere z-index waarde getoond.
Hier is een basisvoorbeeld van hoe je z-index kunt gebruiken:
```
.eersteDiv {
position: absolute;
z-index: 1;
}
.tweedeDiv {
position: absolute;
z-index: 2;
}
```
In dit voorbeeld zal de “tweedeDiv” worden getoond bovenop de “eersteDiv” omdat deze een hogere z-index waarde heeft.
Het is belangrijk op te merken dat z-index alleen van invloed is op de elementen die een ‘position’ waarde van ‘absolute’, ‘relative’, ‘fixed’ of ‘sticky’ hebben. Als een element een ‘position’ waarde van ‘static’ heeft (de standaardwaarde), dan zal de z-index eigenschap geen effect hebben.
Hier is een voorbeeld van hoe je dat kunt doen:
```
.parentDiv {
position: relative;
}
.childDiv {
position: absolute;
z-index: 1;
}
```
In dit voorbeeld zal de “childDiv” worden getoond bovenop de “parentDiv”, zelfs als het in de HTML-mark-up eerder komt, omdat het een hogere z-index heeft. Het is ook belangrijk op te merken dat de “parentDiv” een position van “relative” moet hebben om de z-index op de “childDiv” van invloed te laten zijn.
