⌘K

Z-index хусусияти

z-index хусусияти бир нечта элемент бир-бирини устига тушаётган ҳолда ким юқорида turishini белгилайди.

Синтаксис

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

Сон бутун, мусбат ёки манфий бўлиши мумкин. Нол ҳам бўлиши мумкин.

Қийматлар

Қиймат Тасниф
Сон Бутун сон элементларнинг устма-уст тушиш тартибини белгилайди: элементлар бир-бирини устига тушаётганда юқорида z-index катта бўлган элемент туради.
auto Устма-уст тушиш тартиби автоматик қурилади: юқорида HTML кодда пастроқ жойлашган элемент бўлади.

Стандарт қиймат: auto.

Мисол

Бу мисолда блоклар HTML коддаги тартибда бир-бирини устига тушади (z-index белгиланмаган ва стандарт қийматга эга бўлади - auto). Биринчи блок энг pastda (қизил), oxirгиси - энг юқорида (яшил): 

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Свойство positionNextПсевдоэлемент backdrop