Почему z-index игнорируется с позицией: static?

Смотрите этот комментарий из jquery-ui

// Ignore z-index if position is set to a value where z-index is ignored by the browser
// This makes behavior of this function consistent across browsers
// WebKit always returns auto if the element is positioned

Я вижу, что jquery zIndex() возвращает 0, если элемент position: static.

Не поддерживается ли z-индекс в позиции: static? (Он работает для меня в Chrome, не проверял кросс-браузер)

Ответы

Ответ 1

Потому что position: static означает "Игнорировать все инструкции позиционирования от left, top, z-index и т.д.".

'z-index'
Value:      auto | <integer> | inherit
Initial:    auto
Applies to:     positioned elements

- http://www.w3.org/TR/CSS21/visuren.html#z-index

Элемент называется позиционированным, если его свойство "position" имеет значение, отличное от "static".

- http://www.w3.org/TR/CSS21/visuren.html#positioned-element

Ответ 2

z-index не игнорируется для flex-элементов (непосредственные дочерние элементы flex-контейнера, элемента с display: flex или display: inline-flex) или grid-элементов (непосредственные дочерние элементы для grid-контейнера, элемента с display: grid или display: inline-grid).

Спецификации цитата

Из спецификации W3C Flexbox:

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

Из спецификаций W3C CSS Grid Layout:

Элементы сетки могут перекрываться, когда они расположены в пересекающихся областях сетки, или даже если они расположены в непересекающихся областях из-за отрицательных полей или позиционирования. Порядок рисования элементов сетки точно такой же, как и у встроенных блоков CSS21, за исключением того, что порядок документа order -modified используется вместо необработанного порядка документов, а значения z-index отличные от auto создают контекст стека, даже если position static ( ведет себя точно так, как если бы position было relative). Таким образом, свойство z-index можно легко использовать для управления порядком оси z элементов сетки.

Пример Flexbox

Итак, предположим, что у нас есть этот макет с перекрытием (.flex-item-two перекрывается .flex-item-one с использованием, например, отрицательных полей):

.flex {
  display: flex;
  align-items: center;
}

.flex-item-one {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-right: -50px;
}

.flex-item-two {
  width: 200px;
  height: 200px;
  background-color: green;
}
<div class="flex">
  <div class="flex-item flex-item-one">One</div>
  <div class="flex-item flex-item-two">Two</div>
</div>