Уласцівасць 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;
}