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

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

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

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

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

Результат: