Почему z-index игнорируется с помощью position: static?

Question

См. Этот комментарий от 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-index для позиции: статическая? (Это работает для меня в Chrome, не тестировал кросс-браузер)

Answer 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

Answer 2

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

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

Из Характеристики W3C Flexbox :

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

Из Спецификации макета сетки W3C CSS :

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

Если индекс flex-item-one больше .flex-item-two, .flex-item-one, то перекрывается .flex-item-two.

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

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

.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>

Пример CSS Grid

#grid {
  display: inline-grid;
  width: 250px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr
}

#A {
  grid-column: 1 / span 2;
  grid-row: 2;
  align-self: end;
  background-color: #4f81bd;
}

#B {
  grid-column: 1;
  grid-row: 1;
  z-index: 10;
  background-color: #8064a2;
}

#C {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin-left: -20px;
  background-color: #f79646;
}

#D {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: start;
  background-color: #9bbb59;
}

#E {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  z-index: 5;
  justify-self: center;
  align-self: center;
  background-color: #c0504d;
}

#grid > * {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 40px;
  font-size: 32px;
}

#C, #D {
  padding: 10px 20px;
}

<div id="grid">
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
  <div id="D">D</div>
  <div id="E">E</div>
</div>