⌘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Уласцівасць positionNextПсеўдаэлемент backdrop