De eigenschap z-index
De eigenschap z-index bepaalt wie
bovenop komt te liggen in het geval dat meerdere elementen
over elkaar heen geplaatst worden.
Syntaxis
selector {
z-index: getal | auto;
}
Het getal moet een geheel getal zijn, positief of negatief. Het kan ook nul zijn.
Waarden
| Waarde | Beschrijving |
|---|---|
| Getal |
Een geheel getal bepaalt de stapelvolgorde van elementen:
wanneer elementen over elkaar heen geplaatst worden, komt
degene met de hoogste z-index waarde bovenop te liggen.
|
auto |
De stapelvolgorde wordt automatisch opgebouwd: het element dat lager in de HTML-code staat, komt bovenop. |
Standaardwaarde: auto.
Voorbeeld
In dit voorbeeld worden de blokken over elkaar heen geplaatst
in de volgorde van hun weergave in de HTML
code (z-index is niet ingesteld en heeft
de standaardwaarde - auto). Het eerste
blok komt helemaal onderaan (rood), en het laatste
- bovenop (groen):
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
#div1 {
position: absolute;
top: 30px;
left: 30px;
width: 50px;
height: 50px;
background: red;
}
#div2 {
position: absolute;
top: 60px;
left: 60px;
width: 50px;
height: 50px;
background: blue;
}
#div3 {
position: absolute;
top: 90px;
left: 90px;
width: 50px;
height: 50px;
background: green;
}
:
Voorbeeld
Laten we de stapelvolgorde veranderen door z-index in te stellen.
Rood blok - 3, blauw blok - 2,
groen blok - 1. De stapelvolgorde wordt omgekeerd
(het blok met z-index
3 komt bovenop):
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
#div1 {
position: absolute;
top: 30px;
left: 30px;
width: 50px;
height: 50px;
background: red;
z-index: 3;
}
#div2 {
position: absolute;
top: 60px;
left: 60px;
width: 50px;
height: 50px;
background: blue;
z-index: 2;
}
#div3 {
position: absolute;
top: 90px;
left: 90px;
width: 50px;
height: 50px;
background: green;
z-index: 1;
}
: