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