Vad är Z-index?
Z-index är en egenskap i CSS som används för att bestämma vilket element som ska visas ovanpå andra element på en webbsida.
Z-index-värden:
- Z-index: auto: Elementet placeras i positioneringskontextens normala staplingsordning (se nedan).
- Z-index: 0: Elementet placeras ovanpå andra element med Z-index: auto, men under element med positiva Z-index-värden.
- Z-index: 1: Elementet placeras ovanpå element med Z-index: 0 och under element med högre Z-index-värden.
- Positiva Z-index-värden: Ju högre värde, desto högre placeras elementet.
- Negativa Z-index-värden: Elementet placeras under element med Z-index: 0.
Exempel:
.element1 {
z-index: 0;
}
.element2 {
z-index: 1;
}
.element3 {
z-index: 2;
}
I detta exempel kommer element3 att visas ovanpå element2, som i sin tur kommer att visas ovanpå element1.
Så här använder du Z-index:
- Ställ in Z-index-värden: Ge varje element som du vill positionera ett Z-index-värde.
- Använd negativa värden för att placera element under andra: Detta kan vara användbart för exempelvis bakgrundselement eller element som ska vara dolda för användaren.
- Använd positiva värden för att stapla element i lager: Ju högre värde, desto högre placeras elementet.
- Tänk på positionering: Z-index fungerar endast för element som är positionerade på annat sätt än "static".