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

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

位置上是否支持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

flex-items（flex-container的直接子节点，z-index或display: flex元素）不会忽略

display: inline-flex。来自w3c flexbox spec：

Flex items绘制与内联块CSS21完全相同，只是order - 使用修改后的文档顺序代替原始文档顺序，并使用z-index以外的值auto即使position为static，也会创建堆叠上下文。

因此，我们假设这个布局重叠（.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>

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

2 个答案: