为什么 z-index 被 position:static 忽略？

Question

看到这条评论from 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

如果元素是 position: static，我看到 jquery 的 zIndex() 返回 0。

位置：静态不支持 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

如果元素的“位置”属性具有“静态”以外的值，则称该元素已定位。

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

Answer 2

z-index 不会被 flex-items（flex-container 的直接子代，带有 display: flex 或 display: inline-flex 的元素）或 grid-items（grid-container 的直接子代，带有 display: grid 或 @ 的元素）忽略987654346@).

规格报价

来自W3C Flexbox specs：

Flex items 绘制与内联块 CSS21 完全相同，除了使用 order-modified 文档顺序代替原始文档顺序，以及 z-index 以外的值 auto 甚至创建堆叠上下文如果position 是static。

来自W3C CSS Grid Layout specs：

Grid items 在定位到相交的grid areas 时可能会重叠，甚至由于负边距或定位而定位在非相交区域时。 grid items 的绘制顺序与内联块CSS21 完全相同，只是使用order-modified document order 代替原始文档顺序，并且z-index 以外的值auto 创建一个堆叠上下文，即使@987654337 @ 是 static（表现得就像 position 是 relative）。因此z-index 属性可以很容易地用于控制网格项目的 z 轴顺序。

弹性盒示例

所以假设我们有这种重叠的布局（.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 {
  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>