Я изучаю контексты стеков и выполняю некоторые тесты со свойствами, которые создают контекст стекирования.
Я провел несколько тестов и обнаружил, что в дополнение к z-index, конечно, следующие свойства также создают контекст стекирования:
transform кроме none;opacity кроме 1;perspective.Существуют ли другие свойства, применяющие контекст стекирования?
Один или несколько из следующих сценариев заставят элемент установить свой собственный контекст стека 1 для его потомков:
Корневой элемент всегда содержит контекст укладки корня. Вот почему вы можете начать компоновку элементов без необходимости сначала позиционировать корневой элемент. Любой элемент, который еще не участвует в локальном контексте стекирования (сгенерированный любым из других сценариев ниже), будет участвовать в контексте корневого стека.
Установите z-index на что-либо, кроме auto на элемент, который находится (т.е. элемент с position это не static).
Обратите внимание, что это поведение будет изменено для элементов с position: fixed, чтобы они всегда устанавливали контексты стекирования независимо от их значения z-index. Некоторые браузеры начали применять это поведение, однако это изменение еще не было отражено ни в CSS2.1, ни в новом CSS Layed Layout Module, поэтому возможно, нет смысла полагаться на это поведение на данный момент.
Это изменение в поведении рассматривается в еще одном моем ответе, который, в свою очередь, ссылается на this статья и этот набор минут телеконференции CSSWG.
Другим исключением из этого является flex item. Установка z-index в элементе flex всегда заставит его установить контекст стекирования, даже если он не расположен.
Установите opacity на что-нибудь меньшее, чем 1.
Преобразование элемента:
Установите transform на все, кроме none.
Настройка transform-style на preserve-3d.
Настройка perspective для чего-либо, кроме none.
Создание область CSS: установка flow-from для чего-либо иного, кроме none для элемента, чье content есть что-то другое, кроме normal.
В paged media, каждый поле страницы-поля устанавливает свой собственный контекст стекирования.
В эффекты фильтра, установка filter для чего-либо другого, кроме none.
В композитинг и смешивание, установка isolation to isolate.
В изменится, установив will-change к свойству, чье любое не начальное значение создаст контекст стекирования.
Обратите внимание, что блок форматирования не совпадает с контекстом стекирования; на самом деле, это две совершенно независимые (хотя и не взаимоисключающие) концепции.
1 Это не включает контексты псевдоукладки, неформальный термин, который просто ссылается на вещи, которые ведут себя как независимые stacking contexts в отношении позиционирования, но фактически участвуют в их родительских контекстах стекирования.