Die z-index eienskap
Die eienskap z-index stel vas wie
bo sal wees in die geval waar verskeie elemente
oor mekaar geplaas word.
Sintaksis
selekteerder {
z-index: getal | auto;
}
Die getal moet 'n heelgetal wees, positief of negatief. Kan nul wees.
Waardes
| Waarde | Beskrywing |
|---|---|
| Getal |
'n Heelgetal stel die oorvleuelingsvolgorde van elemente:
wanneer elemente oor mekaar geplaas word, sal die een
met die groter z-index bo wees.
|
auto |
Die oorvleuelingsvolgorde word outomaties gebou: bo sal die element wees wat laer in die HTML-kode geleë is. |
Verstekwaarde: auto.
Voorbeeld
In hierdie voorbeeld sal blokke oor mekaar
geplaas word in die volgorde waarin hulle in die HTML-
kode voorkom (z-index is nie gespesifiseer nie en sal die
verstekwaarde hê - auto). Die eerste
blok sal heel onder wees (rooi), en die laaste een
- bo-oor almal (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
Laat ons die oorvleuelingsvolgorde verander deur z-index te spesifiseer.
Aan die rooi blok gee ons 3, aan die blou een - 2,
aan die groen een - 1. Die oorvleuelingsvolgorde sal omgekeer word
(bo-oor almal sal die blok met z-index
3 wees):
<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;
}
: