Контекс наложения в css

Кратко

Контекст наложения — набор правил, на основании которых браузер решает, какой элемент на странице будет выше или ниже других. Условно, если представлять элементы как колоду карт, то правила формирования контекста наложения тасуют колоду. Это одна из основных концепций CSS.

Слои находятся на разном удалении от взгляда пользователя и могут перекрывать друг друга

Всё по порядку

Браузер при отрисовке страницы идёт сверху вниз по HTML-разметке и рисует блоки один за другим в том же порядке, в котором они расположены. Мы видим и воспринимаем это как плоский лист, на котором один за другим выстраиваются элементы. Но браузер хитрый и на самом деле он располагает элементы не только по осям x и y, но ещё и по оси z. По глубине, так сказать.

Вы можете резонно заметить «Монитор же плоский! Какая ещё глубина?». Ваша правда. Но браузеру важно учитывать глубину элементов, чтобы при необходимости правильно наложить их друг на друга.

В стандартной ситуации тот элемент, который находится ниже в HTML-разметке будет ближе к пользователю. Давайте посмотрим на примере. Пусть в нашей разметке будет два блока:

<div class="block first"></div>
<div class="block second"></div>

И для наглядности мы сдвинем второй блок чуть вверх и вправо:

.second {
  margin-top: -50px;
  margin-left: 50px;
}

Открыть демо в новой вкладке

В результате явно видно, что второй блок перекрывает собою первый, а значит находится выше в стопке элементов по оси z.

z-index

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

Перемешаем элементы в нашем примере. Для наглядности добавим третий блок:


<div class="block first"></div>
<div class="block second"></div>
<div class="block third"></div>

И пусть последний блок и первый блоки перекрывают второй блок. Для этого достаточно добавить позиционирование и z-index для первого, а последний и так выше, просто по порядку следования:


.first {
  position: relative;
  z-index: 1;
}

Для большинства стандартных случаев этих знаний достаточно. Но случаются ситуации посложнее. Пойдём глубже и поговорим про контекст наложения.

Контекст наложения

На самом деле уже в предыдущих примерах мы с вами поработали с контекстом наложения. Просто не знали об этом 😅

Контекст наложения — это концепция трёхмерного расположения элементов по оси z относительно пользователя, смотрящего на экран.

Самый базовый контекст наложения, существующий на любой странице формируется корневым элементом <html>. Все элементы внутри этого контекста сортируются и располагаются с оглядкой друг на друга.

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

Новый контекст наложения формируется если:

это корневой элемент (<html>),
элемент позиционирован абсолютно (position: absolute) или относительно (position: relative) со свойством z-index, значение которого не auto,
флекс-элемент со свойством z-index, значение которого не auto и чей родительский элемент имеет свойство display: flex или display: inline-flex,
элементу задано свойство opacity со значением меньше 1,
элементу задано свойство transform со значением не none,
элементу задано свойство mix-blend-mode со значением не normal,
элементу задано свойство filter со значением не none,
элементу задано свойство isolation со значением isolate,
элемент с position: fixed,
элементу задано свойство will-change или аналогичный атрибут,
элементу задано свойство -webkit-overflow-scrolling со значением touch.

Остальные элементы, не создающие собственный контекст наложения, используют родительский контекст.

Контекс наложения в css

Кратко

Всё по порядку

z-index

Контекст наложения

Report Page