tgoop.com/startpoint_dev/43
Last Update:
🔍 Продолжаем разговор про 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.
BY Настя Котова // Frontend & Node.js
Share with your friend now:
tgoop.com/startpoint_dev/43