了解z-index:这个元素如何出现在父元素的兄弟面前？

Question

当我z-index从中取出时,为什么红色div位于绿色div前面.wrapperRed？

感觉就像z-index是继承了链条.

如果我z-index将绿色div 更改为6,即使在删除第一句中描述的行后,它也会保留在红色div的前面.

.wrapperRed {
  height: 200px;
  width: 200px;
  position: absolute;
  z-index: 1; /* Why is the red div in front of the green one, if this z-index is deleted? */
}

.red {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: red;
  z-index: 5;
}

.green {
  height: 200px;
  width: 200px;
  background-color: green;
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 1;
}

<div class="wrapperRed">
  <div class="red"></div>
</div>
<div class="green"></div>

Answer 1

z-index当您从 中删除时.wrapperRed，该元素默认为z-index: auto。

在这种情况下， 和.red都参与相同的堆栈上下文，因为定位元素在is (引用.green)时不会创建堆栈上下文。z-indexauto

在此处了解有关z-index堆叠上下文的更多信息：CSSz-index属性的基础知识