За что отвечает свойство z-index в CSS?

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

Ключевые моменты:

• Применяется только к позиционированным элементам (position: relative, position: absolute, position: fixed, position: sticky).
• Значение может быть числом (положительным, отрицательным или ноль).
• Автоматическое значение (auto) соответствует порядку в DOM дереве.
• Отрицательные значения z-index могут помещать элемент под родительским элементом и его содержимым.
• z-index создает контекст наложения (stacking context). Элементы внутри одного контекста наложения упорядочиваются по своему z-index, но весь контекст наложения ведет себя как единое целое относительно других контекстов наложения.

Порядок наложения по умолчанию (без z-index):

1. Фон и границы корневого элемента.
2. Позиционированные элементы с отрицательным z-index.
3. Блочные элементы в нормальном потоке.
4. Плавающие элементы (float).
5. Строчные элементы в нормальном потоке.
6. Позиционированные элементы с z-index: auto или z-index: 0.
7. Позиционированные элементы с положительным z-index.

Пример:

/* style.css */
.box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Будет выше синего */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Будет ниже красного */
}

<!-- index.html -->
<div class="box red"></div>
<div class="box blue"></div>

В данном случае, красный блок (z-index: 1) будет находиться поверх синего блока (z-index: 0).