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