Регулювання накладання елементів по осі Z у CSS

Регулювання накладання елементів по осі Z у CSS

За допомогою властивості z-index можна керувати тим, який елемент буде знаходитися вище при накладанні.

Властивість z-index приймає цілі числа: додатні значення, від'ємні значення або нуль.

Важливо: z-index працює тільки для елементів, у яких задано position: relative, absolute, fixed або sticky.

Як працює z-index

Чим більше значення z-index, тим вище буде знаходитися елемент.

• z-index: 10 буде вище, ніж z-index: 5.
• z-index: 2 буде вище, ніж z-index: 1.
• z-index: 0 буде нижче додатних значень.
• Від'ємні значення можуть перемістити елемент на задній план.

Приклад без z-index

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
  position: absolute;

  top: 30px;
  left: 30px;

  width: 100px;
  height: 100px;

  background-color: #ff8888;
}

#elem2 {
  position: absolute;

  top: 60px;
  left: 60px;

  width: 100px;
  height: 100px;

  background-color: #7e89eb;
}

Зміна порядку через z-index

Зробимо перший блок вищим за другий за допомогою більшого значення z-index.

#elem1 {
  z-index: 2;
}

#elem2 {
  z-index: 1;
}

Практичне використання z-index

• Модальні вікна поверх сторінки.
• Випадаючі меню поверх контенту.
• Кнопки поверх зображень.
• Бейджі та декоративні елементи на картках.

Практичні завдання

#elem1 {
  position: absolute;
  z-index: 2;
}

#elem2 {
  position: absolute;
  z-index: 1;
}