За что отвечает свойство 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.

Пример:

css

html

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