Указывает ли z-index уровень стека непозиционированного элемента flex?

В CSS 2.1 z-index применяется только к расположенным элементам и указывает две разные вещи:

  • Уровень стека поля в текущем контексте стекирования.
  • Определяет ли контейнер контекст стекирования.

Но Flexbox говорит следующее:

Элементы Flex отображаются точно так же, как встроенные блоки [CSS21 ], за исключением того, что order -модифицированный заказ документа используется вместо необработанный порядок документа и z-index значения, отличные от auto, создать stacking context, даже если position static.

Затем, в отличие от CSS2.1, установка z-index некоторого целого числа на некорректном элементе flex создает контекст стекирования.

Однако я не вижу нигде, где должен быть уровень стека этого контекста стекирования.

Аналогичным случаем является opacity, который также может создавать установочные контексты стеков для непозиционированных элементов. Но в этом случае уровень стека правильно задан как 0:

Если элемент с непрозрачностью менее 1 не расположен, реализации должны рисовать слой, который он создает, внутри своего родителя контекст стекирования, с тем же порядком укладки, который будет использоваться, если он были позиционированным элементом с z-index: 0 и opacity: 1.

По-моему, эти варианты разумны:

  • Уровень стека - это значение, указанное в z-index
  • Уровень стека равен 0
  • Элемент flex обертывает своих потомков в контексте стекирования, так что они раскрашиваются вместе, но сам элемент flex покрашен как обычный элемент, не находящийся в потоке (как если бы он не устанавливал контекст стекирования).

Согласно следующему тесту, Firefox и Chrome делают первый вариант.

.container {
  display: flex;
  padding-left: 20px;
}
.item {
  padding: 20px;
  background: #ffa;
  align-self: flex-start;
  margin-left: -20px;
}
.item:nth-child(even) {
  background: #aff;
  margin-top: 40px;
}
.za::after{ content: 'z-index: auto'; }
.z0 { z-index: 0; } .z0::after{ content: 'z-index: 0'; }
.z1 { z-index: 1; } .z1::after{ content: 'z-index: 1'; }
.z-1 { z-index: -1; } .z-1::after{ content: 'z-index: -1'; }
<div class="container">
  <div class="item z1"></div>
  <div class="item z0"></div>
  <div class="item za"></div>
  <div class="item za"></div>
  <div class="item z-1"></div>
</div>

Ответы

Ответ 1

Рабочая группа CSS:

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

source: https://lists.w3.org/Archives/Public/www-style/2012Jul/0382.html

Дополнительная информация:

Кроме того, хотя это не прямой ответ на вопрос, следующие W3C Editor Drafts предоставляют сильные подсказки относительно того, где CSS идет с z-index и контекстами стекирования.

11. Многоуровневая презентация ~ CSS Позиционированный модуль макета 3-го уровня

12. Подробный контекст стекирования ~ CSS Позиционированный модуль макета 3-го уровня

4.3. Z-axis Ordering: свойство z-index ~ Модуль компоновки сетки CSS уровня 1

Интересно отметить, что z-index, как определено в CSS Positioned 3 Editor Draft, применяется только к расположенным элементам. Это не отличается от CSS 2.1. Тем не менее элементы сетки и flex items могут создавать контексты стекирования с помощью z-index, даже если position static.