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

cssselekteerder {
  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):

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

css#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):

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

css#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;
}

Результат: