Свойство z-index: порядок наложения

Как это работает

z-index участвует в порядке наложения элементов внутри контекста наложения. Контексты можно представить как группы: потомок не может произвольно перепрыгнуть наружу над любой соседней группой только за счёт огромного числа.

Контекст создают разные условия, включая позиционированный элемент с z-index, opacity меньше единицы и transform. Свойство применимо также к flex- и grid-элементам в соответствующих условиях. Если меню прячется под соседним блоком, изучите не только его число, но и свойства предков.

Пример в интерфейсе

.stage { position: relative; height: 150px; }
.box { position: absolute; padding: 25px; border: 1px solid #11694e; }
.a { left: 10px; top: 10px; background: #eaf4ee; z-index: 2; }
.b { left: 90px; top: 50px; background: #e8effa; z-index: 1; }

Значения и поведение

На что обратить внимание

Проверьте на практике

Поменяйте местами z-index двух карточек. Затем задайте родителю transform и посмотрите, как он создаёт отдельную группу наложения.

Связанные темы: position, display.