Egenskaben z-index

Egenskaben z-index bestemmer, hvilket element der vil være øverst, hvis flere elementer overlapper hinanden.

Syntaks

cssselector {
  z-index: tal | auto;
}

Tallet skal være et heltal, positivt eller negativt. Det kan være nul.

Værdier

Værdi	Beskrivelse
Tal	Et heltal angiver rækkefølgen for overlapping af elementer: når elementer overlapper hinanden, vil det element med den højeste `z-index` være øverst.
`auto`	Overlappingsrækkefølgen bygges automatisk: det element, der er placeret længere nede i HTML-koden, vil være øverst.

Standardværdi: auto.

Eksempel

I dette eksempel vil blokkene overlappe hinanden i den rækkefølge, de vises i HTML-koden (z-index er ikke angivet og vil have standardværdien - auto). Den første blok vil være nederst (rød), og den sidste - øverst (grøn):

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

Результат:

Eksempel

Lad os ændre overlappingsrækkefølgen ved at angive z-index. Den røde blok får 3, den blå får 2, og den grønne får 1. Overlappingsrækkefølgen vil blive vendt (øverst vil være blokken med z-index 3):

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

Результат: