Нюанси використання від'ємного значення z-index у CSS

Розбираємо, як працюють від'ємні значення z-index та чому елемент із z-index: -1 може опинитися позаду інших елементів.

Нюанси використання від'ємного значення z-index у CSS

Якщо для елемента не задано властивість z-index, браузер вважає його значення рівним 0.

Це означає, що елемент із z-index: -1 буде знаходитися нижче за елемент, у якого z-index не заданий.

Приклад

Є два елементи, які перекриваються. Перший елемент не має z-index, тому його значення дорівнює 0.

#elem1 {
  /* z-index не заданий */
}

#elem2 {
  z-index: -1;
}

Порівняння значень z-index

z-index: 2 — елемент знаходиться вище.
z-index: 1 — нижче за z-index: 2.
z-index: 0 — стандартне значення.
z-index: -1 — елемент буде позаду елементів зі значенням 0.

Приклад із двома блоками

#elem1 {
  position: absolute;

  width: 100px;
  height: 100px;

  background-color: red;
}

#elem2 {
  position: absolute;

  z-index: -1;

  width: 100px;
  height: 100px;

  background-color: blue;
}

❗ Важливо:

Від'ємний z-index потрібно використовувати обережно. Елемент може опинитися позаду батьківського фону і стати невидимим.

Де використовують від'ємний z-index

Декоративні фонові елементи.
Тіні та фігури позаду основного контенту.
Анімовані елементи під текстом.

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

📌 Завдання:

№1. Створіть два блоки, які перекриваються.
№2. Додайте їм position: absolute.
№3. Другому блоку задайте z-index: -1.
№4. Перевірте, як змінився порядок шарів.

💡 Показати підказку

Якщо z-index не заданий, браузер використовує значення 0.

✅ Показати відповідь

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