Z-index不工作嵌套的绝对div

Question

我有一个问题，为什么z-index无法在嵌套的绝对值中工作：

这里是我的代码：

.relative {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  position: relative;
  background-color: #E7E7E7;
}

.absolute {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #16E186;
  z-index: 4;
}

.absoluteChild {
  width: 75%;
  height: 200px;
  position: absolute;
  top: 20px;
  background-color: #1665e1;
  z-index: 1;
}

.absoluteGrandchild {
  width: 90%;
  height: 80px;
  position: absolute;
  top: 20px;
  background-color: #ff0056;
  z-index: 1;
}

<div class="relative">
  <div class="absolute">
    Hello World
    <div class="absoluteChild">
      <div class="absoluteGrandchild">

      </div>
    </div>
  </div>
</div>

Answer 1

  

在堆叠上下文中，子元素按照堆叠方式堆叠   先前解释的相同规则。重要的是，z-index值为   它的子堆叠上下文只对这个父项有意义。堆垛   上下文被原子地视为父级中的单个单元   堆叠背景。

     

...

     

每个堆叠上下文都是自包含的：在元素的内容之后   堆叠，整个元素被认为是堆叠顺序   父堆叠上下文。

Source

它有意为之。它们以父母的正确顺序堆叠。

Answer 2

没有任何z-index值，元素按照它们在DOM中出现的顺序堆叠（在同一层次结构级别的最低层显示在顶部）。具有非静态定位的元素将始终显示在具有默认静态定位的元素的顶部。

另请注意，嵌套起着重要作用。如果元素B位于元素A的顶部，则元素A的子元素永远不会高于元素B.

Answer 3

z-index是第三维图形索引。想象一下有很多论文存在的桌子。在这个类比中，另一篇论文上面的论文有更高的z-index。但是，您认为自己遇到了不同的行为，但是，您错了。想象一下桌子上的一本封闭的书。它有第一页，第二页等。虽然您可以索引书籍的页面，但除非您将书籍从书本中取出，否则不能将书籍的任何页面放在书籍的上方或下方。在更多技术术语中，z-index为兄弟姐妹编制索引，但不会为子父母编制索引。

Answer 4

它实际上应该以这种方式工作。

让我用方块解释一下。每当您为元素赋予z-index值时，它就会变成一个框。因此，我们有三个盒子。

• 一个大盒子：.absoulte
• 中型盒子：.absoluteChild
• 一个小方框：.absoluteGrandchild

您可以订购您希望堆叠兄弟盒子的方式，但是您不能说您想要一个较小的子盒子放在更大的父盒子上。

对于包装人员，也就是浏览器，你用你的z-index值说：

• 拿一个大盒子给它4号。
• 在大盒子里，拿一个中号盒子，给它一个数字。
• 在中型框中，获取一个小方框并给它一个数字。

具有较低值的框将位于具有较大值的相同大小的框下。

警告

您不能使用 littler 框并将其堆叠在较大框的顶部或下方！盒子里面发生了什么！不这样做会导致一堆不稳定的盒子给所有开发人员带来巨大的麻烦！

最后，从第一次设置z-index值开始计算框的大小。

• 没有价值
  • 没有价值
    • 没有价值
    • 价值（大盒子）
      • 价值（中盒）
        • 值（小方框）
      • 价值（中盒）
        • 值（小方框）
        • 值（小方框）
        • 值（小方框）
• 价值（大盒子）
  • 价值（中盒）
    • 值（小方框）
  • 价值（中盒）
    • 值（小方框）
    • 值（小方框）
    • 值（小方框）