Egenskapen z-index

Egenskapen z-index bestämmer vem som kommer att vara överst om flera element överlagras på varandra.

Syntax

cssselektor {
  z-index: tal | auto;
}

Talet måste vara ett heltal, positivt eller negativt. Kan vara noll.

Värden

Värde	Beskrivning
Tal	Ett heltal anger ordningen för överlagring av element: när element överlagras på varandra kommer det som har störst `z-index` att hamna överst.
`auto`	Överlagringsordningen byggs upp automatiskt: det element som ligger längre ner i HTML-koden kommer att hamna överst.

Standardvärde: auto.

Exempel

I detta exempel kommer blocken att överlagras på varandra i den ordning de följer i HTML-koden (z-index är inte satt och kommer att ha standardvärdet - auto). Det första blocket kommer att vara längst ner (rött), och det sista - överst (grönt):

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

Результат:

Exempel

Låt oss ändra överlagringsordningen genom att sätta z-index. Rött block - 3, blått - 2, grönt - 1. Överlagringsordningen kommer att ändras till den omvända (överst kommer blocket 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;
}

Результат: