CSS-свойство isolation: создаем новый контекст наложения

В CSS можно создать новый контекст наложения, используя свойство isolation. Вот как это выглядит:

.container-for-new-stacking-context {
  isolation: isolate;
}

По умолчанию значение isolation — auto. При нем новый контекст может быть создан, но это зависит от других свойств элемента и того, требуют ли они этот новый контекст.

Возможные значения isolation, помимо auto, — inherit, initial, revert и unset.

Использование isolation: isolate; — недвусмысленный способ создать новый контекст наложения.

Что такое контекст наложения?

В CSS «контекст наложения» следует понимать буквально. Он позволяет HTML-элементам образовывать стек (наложение) с их стартовой позиции, основываясь на базовом элементе, который предоставляет контекст.

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

Имейте в виду, что когда рендерится корневой HTML-элемент, он идет вместе с корневым/глобальным контекстом наложения.

Есть много способов создать контексты наложения в рамках глобального контекста. Популярный вариант — использовать position: relative с z-index.

От редакции Techrocks. О свойстве position можно почитать в статье «CSS-свойство position: разбираемся с позиционированием элементов».

Использование position: sticky или fixed работает, но изымает элементы из потока макета и требует дополнительных свойств для размещения в желаемом месте.

Для облегчения наложения также можно применить transform, clip-path или filter. Подробнее почитать о способах формирования контекста наложения можно на MDN Web Docs.

Контексты наложения могут быть вложенными, причем на разных уровнях вложенности. Это все может показаться чуточку заумным, так что давайте рассмотрим практическую пользу от контекстов наложения.

Черная дыра z-index

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

От редакции Techrocks. О поддержании порядка в z-index можно почитать в статье «Как правильно задавать z-index в CSS».

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

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

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

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

Свойство isolation позволяет упростить наложение

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

Вы можете использовать isolation для статически позиционированных элементов и это не затронет дочерние. Это отличный способ создания изолированной базы, содержащей дочерние элементы внутри.

Свойство isolation имеет широкую поддержку.

Синтаксис изоляции, просто в качестве напоминания:

.container-for-new-stacking-context {
  isolation: isolate;
}

Итоги

Свойство isolation: isolate;, примененное к элементу высокого уровня, создает новый контекст наложения для его дочерних элементов.

Перевод статьи «How to Create a New Stacking Context with the Isolation Property in CSS».

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]