了解z-index：这个元素如何出现在其父母的兄弟姐妹面前？

Question

当我从z-index移除.wrapperRed时，为什么红色div位于绿色div前面？

感觉z-index继承了链。

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

从z-index移除.wrapperRed后，元素默认为z-index: auto。

在这种情况下，.red和.green都参与相同的堆叠上下文，因为当z-index为auto时，定位元素不会创建堆叠上下文（{{3 }}）。

在此处详细了解z-index和堆叠上下文：reference

Answer 2

  

当我删除z-index时，为什么.red div位于绿色div前面   来自.wrapperRed？

因为.red不再有父母z-index来约束它。

<强>即

之前： .red在父母z-index的1 中有z-index个5 。

之后： .red的全球 z-index为5。

NB 在之前和之后案例中，.wrapperRed 总是在{{1}之后}}。但是，当它不受约束时，.green（.red的宽度和高度的100％）出现在.wrapperRed的前面。

如果您为父级和子级.green提供不同的背景颜色并让孩子divs小于父级，则可以更轻松地看到这一点。

<强>比较

div

.wrapperRed {
  height: 200px;
  width: 200px;
  position: absolute;
  background-color: red;
  z-index: 1;
}

.yellow {
  position: absolute;
  height: 75%;
  width: 75%;
  background-color: yellow;
  
  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="yellow">
  </div>
</div>

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

.wrapperRed {
  height: 200px;
  width: 200px;
  position: absolute;
  background-color: red;
}

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

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