Својството 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;
}