Websites met stijl
Naslag: z-index
Op dit naslag-blad
De eigenschap z-index
Als verschillende elementen geheel of gedeeltelijk over elkaar heen liggen bepaalt z-index welk element zichtbaar is.
- Een element met een hogere z-index ligt boven een element met een lagere z-index.
Het onder-element is alleen te zien op plaatsen waar het niet bedekt wordt door het element dat er boven ligt.
(Het is ook te zien als het bovenste element min of meer trasparant is).
In feite is z-index het laag-nummer. De bovenste laag is zichtbaar.
Voorbeeld
heading { z-index: 1;}
img.achtergrond { z-index: -1;}
img.logo {z-index: 10;}
- Afbeeldingen van de class achtergrond komen achter de andere elementen.
- De heading komt voor andere elementen (die standaard z-index 0 hebben), maar onder afbeeldingen van de class logo.
- Afbeeldingen van de class logo hebben de hoogste z-index en komen helemaal bovenaan.
Vorm
z-index: getal;
De waarde mag een positief of negatief getal zijn.
Waarden
auto | z-index hetzelfde als parent |
getal | hoogste getal ligt boven. |
initial | Standaard waarde |
juistify | Uitgevuld |
inherit | Erft de waarde van de parent. |