层叠顺序（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>

- Michael Neas

---

z-index属性可能是CSS中最被误解的属性之一。要正确使用它，您需要理解[url=http://reference.sitepoint.com/css/stacking]堆叠上下文的概念。 - undefined

页面未找到！！ - undefined

尝试一下这个：https://css-tricks.com/almanac/properties/z/z-index/ - undefined

Answer 1

在堆叠上下文内，子元素按照先前解释过的相同规则进行堆叠。重要的是，其子堆叠上下文的z-index值仅在此父级中具有意义。堆叠上下文在父堆叠上下文中被作为单个单位原子处理。

...

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

来源

它按照预期工作。它们按照其父级的正确顺序进行堆叠。

- arc

Answer 2

没有设置 z-index 值时，元素按照它们在 DOM 中出现的顺序堆叠（在相同层级中，位于最下方的元素在顶部）。具有非静态定位的元素始终出现在具有默认静态定位的元素之上。

此外，请注意嵌套的作用。如果元素 B 位于元素 A 之上，元素 A 的子元素永远不可能比元素 B 更高。

- lalit bhakuni

Answer 3

z-index 是三维图形的索引。想象一下桌子上有很多纸张的情况。在这个比喻中，位于其他纸张上方的纸张具有更高的 z-index 值。然而，你可能认为经历了不同的行为，但是你是错误的。想象一本合上的书放在桌子上。它有第一页、第二页等等。虽然可以对书的页面进行索引，但是除非将其从书中取出，否则无法将任何书的页面放在书的上方或下方。更加技术化地说，z-index 索引同级元素，但不会索引父子元素。

- Lajos Arpad

Answer 4

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

让我用盒子来解释一下。每当你给一个元素设置了 z-index 值，它就会成为一个盒子。因此，我们有三个盒子。

• 一个大盒子：.absoulte
• 一个中等盒子：.absoluteChild
• 一个小盒子：.absoluteGrandchild

你可以按照你想要的顺序堆叠同级的盒子，但你不能说你想要一个较小的子盒子在一个较大的父盒子之上。

对于打包人员，也就是浏览器，在 z-index 值上，你是这样告诉它的：

• 拿一个大盒子并给它编号 4。
• 在大盒子里，拿一个中等盒子并给它编号 1。
• 在中等盒子里，拿一个小盒子并给它编号 1。

具有更低值的盒子将位于相同大小的具有较高值的盒子之下。

警告

你不能把一个小盒子放在一个更大的盒子上面或下面！盒子里发生的事情就留在盒子里吧！否则，会导致一堆不稳定的盒子，让所有开发人员头痛不已！

最后，你从第一次设置 z-index 值开始确定盒子的大小。

• 没有值
  • 没有值
    • 没有值
    • 有值（大盒子）
      • 有值（中盒子）
        • 有值（小盒子）
      • 有值（中盒子）
        • 有值（小盒子）
        • 有值（小盒子）
        • 有值（小盒子）
• 有值（大盒子）
  • 有值（中盒子）
    • 有值（小盒子）
  • 有值（中盒子）
    • 有值（小盒子）
    • 有值（小盒子）
    • 有值（小盒子）

- Chris Happy