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

Результат:

Backposition қасиетіNextBackdrop псевдоэлементі