Својство z-index

Својство z-index поставља, ко ће бити на врху у случају да се неколико елемената наслажу један преко другог.

Синтакса

селектор {
	z-index: број | auto;
}

Број мора бити цео, позитиван или негативан. Може бити нула.

Вредности

Вредност	Опис
Број	Цео број задаје редослед наслаживања елемената: при наслаживању елемената једног преко другог на врху ће се наћи онај, чији је `z-index` већи.
`auto`	Редослед наслаживања се гради аутоматски: изнад ће бити онај елемент, који се налази ниже у HTML коду.

Подразумевана вредност: auto.

Пример

У овом примеру блокови ће се наслаживати један преко другог по реду њиховог слеђења у HTML коду (z-index није задат и имаће подразумевану вредност - auto). Први блок ће бити на самом дну (црвени), а последњи - изнад свих (зелени):

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

Пример

Променимо редослед наслаживања, задавши z-index. Црвеном блоку - 3, плавом - 2, зеленом - 1. Редослед наслаживања ће се променити на обрнут (изнад свих ће бити блок са 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;
}