🔍 Продолжаем разговор про z-index: Контекст наложения

Контекст наложения (stacking context) — это концепция в CSS, которая определяет, как элементы должны перекрываться или как они наложены друг на друга на веб-странице. Контекст наложения создается в следующих случаях:

1️⃣ Корневой элемент (HTML): По умолчанию корневой элемент создает контекст наложения.

2️⃣ Свойства position и z-index: Любой элемент с свойством position отличным от static, и заданным значением z-index задаёт новый контекст наложения.

3️⃣ Некоторые CSS-свойства также создают новый контекст наложения:

🔸 opacity со значением меньше 1.
🔸 transform, не равное none.
🔸 filter, не равное none.
🔸 perspective, большее нуля.
🔸 clip-path, не равное none.
🔸 mask / mask-image / mask-border, не равные none.
🔸 mix-blend-mode, кроме normal.
🔸 will-change, упоминающее любое из свойств, создающих контекст наложения.
🔸 isolation: isolate.

Внутри контекста элементы сортируются сначала по порядку расположения в HTML, а элементы с указанным z-index перемещаются в соответствии с их значениями z-index. Элемент с более высоким z-index находится над элементом с более низким z-index.

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

<style>
    #content-1 { color: red; height: 18px }
    #new-context { margin-top: -12px }
    #content-2 { color: blue; height: 18px }
    #content-3 { color: green; margin-top: -12px } 
</style>

<div id="main" style="position: relative; z-index: 1;">
    <div id="content-1" style="position: relative; z-index: 10;">#content-1</div>
    <div id="new-context" style="opacity: 0.7;">
        <div id="content-2" style="position: relative; z-index: 200;">#content-2</div>
        <div id="content-3" style="position: relative; z-index: 100;">#content-3</div>
    </div>
</div>

🔹 Здесь элемент #new-context задаёт новый контекст наложения внутри контекста #main.
🔹 Поэтому, несмотря на то, что z-index у элементов #content-2 и #content-3 выше, чем у #content-1, они визуально будут расположены ниже, так как #content-1 поднимается выше всего #new-context благодаря своему z-index.
🔹 При этом #content-2 будет перекрывать #content-3 внутри общего контекста наложения #new-context.

🔗 Подробнее про контекст наложения на MDN.