Какие свойства CSS создают контекст стекирования?

Я изучаю контексты стеков и выполняю некоторые тесты со свойствами, которые создают контекст стекирования.

Я провел несколько тестов и обнаружил, что в дополнение к z-index, конечно, следующие свойства также создают контекст стекирования:

  • transform кроме none;
  • opacity кроме 1;
  • И perspective.

Существуют ли другие свойства, применяющие контекст стекирования?

Ответы

Ответ 1

Один или несколько из следующих сценариев заставят элемент установить свой собственный контекст стека 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 в отношении позиционирования, но фактически участвуют в их родительских контекстах стекирования.