💣 Разбираемся с особенностями CSS-свойства z-index

CSS-свойство z-index используется для управления порядком перекрытия элементов вдоль оси z (ось, перпендикулярная экрану). Это свойство определяет, какой из элементов находится "поверх" других, когда они находятся на одном и том же месте в документе или перекрываются.

Как работает z-index:

1. Применение: z-index может быть применён только к элементам, у которых задано свойство position со значением, отличным от static. Например, relative, absolute, fixed или sticky.

2. Числовые значения: Чем выше значение z-index, тем выше "слой", на котором будет находиться элемент. Значения могут быть положительными или отрицательными.

3. Локальная контекстная наложенность: z-index работает в рамках одного контекста наложения. Есть несколько способов задать новый контекст наложения, но об этом мы поговорим немного позже. Здесь важно понимать, что элемент с z-index: 1000 не перекроет элемент с z-index: 5, если они находятся в разных контекстах наложения.

Примеры:

Элемент с бо́льшим значением z-index будет перекрывать элемент с меньшим значением, если они расположены в одном контексте наложения:

<div style="position: relative; z-index: 1;">
    <div style="position: absolute; z-index: 2;">Перекрывает</div>
    <div style="position: absolute; z-index: 1;">Перекрываемый</div>
</div>

Элемент с отрицательным z-index может быть расположен под базовым уровнем своего контекста. Например, через него можно явно указать, что элемент будет фоном внутри своего родителя:

<div style="position: relative">
    <div style="position: absolute; z-index: -1">Содержимое фона</div>
    Основное содержимое блока
</div>

🔗 Подробнее про z-index на MDN.