⌘K

Z-index касиети

z-index касиети бир нече элемент бири-биринин үстүнө койулган учурда, кимдин үстүрөөк болорун аныктайт.

Синтаксис

cssселектор {
  z-index: сан | auto;
}

Сан бүтүн, оң же терс сан болушу мүмкүн. Нөл болушу дагы мүмкүн.

Маанилер

Маани Сүрөттөмө
Сан Бүтүн сан элементтердин орнотуу тартибин белгилейт: элементтер бири-биринин үстүнө коюлганда, эң үстүндө z-index мааниси чоңураак болгону болот.
auto Орнотуу тартиби автоматтык түрдө түзүлөт: HTML кодунда төмөн жайгашкан элемент үстүрөөк болот.

Демейки мааниси: auto.

Мисал

Бул мисалда блоктор бири-биринин үстүнө HTML кодундагы тартиби боюнча (z-index берилген эмес жана демейки мааниси - auto болот) коюлат. Биринчи блок эң төмөндө (кызыл), ал эми акыркы блок - эң үстүндө (жашыл) болот: 

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
css#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 болгон блок болот): 

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
css#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;
}

Результат:

BackСвойство positionNextbackdrop псевдоэлементи