Egenskapen z-index

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

Syntax

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

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

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

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

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