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

Вивчаємо порядок накладання елементів та розуміємо, як браузер визначає, який елемент буде зверху.

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

У CSS елементи можуть накладатися один на одного. Це часто використовується при створенні карток, меню, модальних вікон та декоративних елементів.

Якщо два елементи займають одну область, браузер визначає порядок їх відображення по осі Z.

За замовчуванням вище буде той елемент, який знаходиться нижче в HTML-коді.

Приклад накладання елементів

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

Як браузер визначає порядок

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

Вісь Z

Уявіть сторінку як простір із трьома напрямками: X — горизонталь, Y — вертикаль, Z — глибина. Саме вісь Z визначає, який елемент буде ближче до користувача.

❗ Важливо:

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

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

📌 Завдання:

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

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

Якщо елементи перекриваються, спочатку перевірте порядок у HTML, а потім використовуйте z-index.

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

#elem2 {
  position: absolute;

  z-index: 2;
}