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

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

对于 flex-items（flex-container 的直接子元素、具有 display: flex 或 display: inline-flex 的元素，不会忽略 z-index ) 或 grid-items（grid-container 的直接子元素，具有 display: grid 或 display: inline-grid 的元素）。

规格引用

自 W3C Flexbox 规格：

Flex 项目 的绘制与内联块完全相同CSS21，除了 order - 使用修改后的文档顺序代替原始文档顺序，以及 z-index除 auto 创建堆叠上下文即使 position 是 静态。




来自 W3C CSS 网格布局规范：

网格项在定位到相交网格区域，甚至位于非相交时由于负边距或定位而导致的区域。 网格项的绘制顺序与内联完全相同阻止 CSS21，除了 订单修改文档顺序 用于代替原始文档顺序，以及 z-index< /a> auto 创建堆叠上下文即使 position 是 static （行为完全就像 < a href="https://www.w3.org/TR/css3-positioning/#propdef-position" rel="noreferrer">位置 为 相对）。因此 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>