Как работает Z-index

1️⃣ Как кратко ответить

Z-index определяет порядок наложения элементов на веб-странице по оси Z. Элементы с более высоким значением Z-index отображаются поверх элементов с более низким значением. Z-index работает только для элементов с установленным свойством position, отличным от static.

2️⃣ Подробное объяснение темы

Z-index — это CSS-свойство, которое управляет порядком наложения элементов на веб-странице. Представьте себе, что веб-страница — это стопка карточек, где каждая карточка — это элемент. Z-index определяет, какая карточка будет лежать выше или ниже в этой стопке.

Как работает Z-index

1. Ось Z: Веб-страница имеет три измерения: X (горизонталь), Y (вертикаль) и Z (глубина). Z-index управляет положением элемента по оси Z, то есть определяет, какой элемент будет выше или ниже других.

2. Только для позиционированных элементов: Z-index работает только для элементов, у которых свойство position установлено в relative, absolute, fixed или sticky. Если position: static (значение по умолчанию), Z-index не будет применяться.

3. Числовые значения: Z-index принимает целочисленные значения. Элемент с более высоким значением Z-index будет отображаться поверх элемента с более низким значением.

Пример использования Z-index

Рассмотрим пример, где у нас есть три перекрывающихся блока:

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

.box1 {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 1; /* Этот элемент будет ниже всех */
}
​
.box2 {
  position: absolute;
  left: 70px;
  top: 70px;
  width: 100px;
  height: 100px;
  background-color: green;
  z-index: 2; /* Этот элемент будет выше box1, но ниже box3 */
}
​
.box3 {
  position: absolute;
  left: 90px;
  top: 90px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 3; /* Этот элемент будет выше всех */
}

• .box1: Установлен z-index: 1, поэтому этот элемент будет находиться ниже всех остальных.
• .box2: Установлен z-index: 2, поэтому этот элемент будет выше .box1, но ниже .box3.
• .box3: Установлен z-index: 3, поэтому этот элемент будет выше всех остальных.

Зачем нужен Z-index

Z-index позволяет управлять визуальным порядком элементов, что особенно важно при создании сложных интерфейсов с перекрывающимися элементами, такими как модальные окна, выпадающие меню и всплывающие подсказки. Это свойство помогает обеспечить правильное отображение и взаимодействие с элементами на странице.

Особенности и ограничения

• Контекст наложения: Каждый элемент с position отличным от static создает свой контекст наложения. Вложенные элементы с Z-index будут ограничены этим контекстом.
• Автоматическое значение: Если Z-index не задан, элементы будут следовать порядку в DOM.
• Отрицательные значения: Z-index может принимать отрицательные значения, что позволяет элементу быть ниже других элементов с Z-index 0 или выше.

Z-index — это мощный инструмент для управления визуальным порядком элементов на веб-странице, который требует понимания контекста наложения и правильного использования позиционирования.