isolation: локальный контекст наложения компонента

Назначение

Значение isolation:isolate создаёт новый контекст наложения. Оно помогает ограничить взаимодействие слоёв внутри компонента с соседними частями страницы.

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

Дочерние z-index сравниваются внутри созданного контекста. Даже очень большое значение у потомка не позволяет ему произвольно обойти порядок внешних контекстов. Свойство не заменяет position и не задаёт координаты.

Пример

<style>.tile{isolation:isolate;position:relative;padding:2rem;border:1px solid #44715b}.tile::before{content:"";position:absolute;inset:.5rem;background:#ddf3e7;z-index:-1}</style>
<section class="tile"><h2>Учебная карточка</h2><p>Декоративный слой находится за текстом.</p></section>

Что должно получиться

Псевдоэлемент с отрицательным z-index остаётся внутри локального контекста карточки. Фоновая подложка лежит за содержимым, но не уходит под произвольные внешние слои.

Граница применения и частая ошибка

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

Самостоятельная проверка

Добавьте рядом перекрывающую карточку с собственным position и z-index. Сравните изменение z-index у родителя и у потомка. Объясните, почему порядок на одном уровне нельзя исправить числом внутри другого уровня.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.

Связанные материалы

• Специфичность
• Контраст
• Контексты наложения