Z-index
Z-index är en CSS-egenskap som används för att bestämma stackningsordningen av element på en webbsida. Stackningsordningen avgör vilket element som visas ovanpå eller under andra element när de överlappar varandra. Z-index gör det möjligt att styra vilka element som ska vara ”över” eller ”under” andra element på sidan genom att tilldela dem ett numeriskt värde.
Hur fungerar Z-index?
Z-index fungerar genom att tilldela ett element ett positivt eller negativt heltal som representerar dess plats i stackningsordningen. Ju högre z-index-värde, desto högre upp i stacken visas elementet. Ett element med ett högre z-index kommer att visas ovanpå element med ett lägre z-index-värde. För att z-index ska fungera måste elementet ha en positionerad layout, vilket innebär att dess position-egenskap måste vara inställd på relative, absolute, fixed eller sticky.
Exempel på Z-index:
.element1 {
position: absolute;
z-index: 1;
}
.element2 {
position: absolute;
z-index: 2;
}
I detta exempel kommer element2 att visas ovanpå element1 eftersom element2 har ett högre z-index-värde (2) än element1 (1).