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