Egenskapen z-index

Egenskapen z-index bestemmer hvem som vil være på toppen i tilfelle hvor flere elementer overlapper hverandre.

Syntaks

cssvelger {
  z-index: tall | auto;
}

Tallet må være et heltall, positivt eller negativt. Kan være null.

Verdier

Verdi	Beskrivelse
Tall	Et heltall setter rekkefølgen for overlapping av elementer: ved overlapping av elementer vil den som har høyest `z-index` være øverst.
`auto`	Rekkefølgen for overlapping bygges automatisk: øverst vil det elementet være som er plassert nederst i HTML-koden.

Standardverdi: auto.

Eksempel

I dette eksemplet vil blokkene overlappe hverandre i rekkefølgen de følger i HTML- koden (z-index er ikke satt og vil ha standardverdien - auto). Den første blokken vil være nederst (rød), og den siste - øverst (grønn):

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

La oss endre rekkefølgen for overlapping ved å sette z-index. Rød blokk - 3, blå - 2, grønn - 1. Rekkefølgen for overlapping vil endres til motsatt (øverst vil blokken med z-index 3 være):

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

Результат: