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