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

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

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

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

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

1 ответов


один или несколько из следующих сценариев вызовет элемент, чтобы установить свой собственный контекст стекирования1 для его потомков:

  • корневой элемент всегда содержит корневой контекст наложения. Вот почему вы можете начать упорядочивать элементы без необходимости сначала позиционировать корневой элемент. Любой элемент, который еще не участвует в локальном контексте стекирования (генерируется любым из других сценариев ниже), будет участвовать в корневом стекировании вместо этого контекст.

  • задание z-index ко всему, кроме auto на элементе, который расположен (т. е. элемент с position это не static).

    • обратите внимание, что это поведение планируется изменить для элементов с position: fixed такие, что они всегда будут создавать контексты укладки, независимо от их z-index значение. Некоторые браузеры начали принимать это поведение, однако изменения не были отражено в любом CSS2.1 или новый CSS позиционируется макет модуля тем не менее, поэтому, возможно, не стоит полагаться на это поведение сейчас.

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

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

  • задание opacity ни к чему меньшему, чем 1.

  • преобразование элемент:

  • создание областей CSS: параметр flow-from ко всему, кроме none на элемент,content не normal.

  • на paged media, каждый страница-поле Поля устанавливает свои укладки контекст.

  • на эффекты фильтра установка filter ко всему, кроме none.

  • на композиция и смешивание установка isolation to isolate.

  • на изменится установка will-change к свойству, любое не начальное значение которого создало бы штабелирование контекст.

обратите внимание, что a контекст форматирования блока это не то же самое, что контекст штабелирования; на самом деле, это два совершенно независимых (хотя и не взаимоисключающих) понятия.


1это не относится к псевдо-укладка контекстах неофициальный термин, относящийся к вещи, которые ведут себя как независимые контексты штабелировать относительно располагать, но на самом деле участвуют в родительских контекстах.