为什么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

我看到zIndex()如果元素是jquery,则返回0 position: static.

位置上是否支持z-index:static？(它在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是不是忽略柔性项（柔性容器，元素与直接子display: flex或display: inline-flex或网格项目（网格容器，元素与即时子女）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 {
  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>