html - 如何堆叠此Z-index配置？

我遇到的情况是：

我的层次结构是：

box1: (z-index: 5000)
  -(other parent elements)
    -box1_child (z-index: 5001)
box2 (z-index: 5000)
  -(other parent elements)
    -box2_child (z-index: 5002)

所以很明显，我希望box1和box2处于同一级别。
我想让box1_child坐在box2上。
我希望box2_cihld坐在box1_child上方。

但是，它不起作用（在FF4中），基本上，box1_child没有位于box2上方。

这可能吗（在较新的浏览器上？）

所有元素都具有非静态位置。

最佳答案

即使两个相邻的元素具有相同的Z-index，它们仍然具有一定的堆叠顺序：后面出现的顺序在第一个之上绘制。

使用此功能，您可以使用此CSS（简体）以所需的方式堆叠元素。

#box1{
    position: absolute;
    z-index:auto;
}
#box1_child {
    position: absolute;
    z-index:1;
}
#box2{
    position: absolute;
    z-index:auto;
}
#box2_child {
    position: absolute;
    z-index:1;
}

然后，在box1上绘制box2（如果它们完全重叠），并且在box1_child上绘制box2_child，但在父级box上绘制两个子级。

jsFiddle。

在各种新型浏览器上测试。我这里没有Firefox 4，因此无法确认它在那里不起作用。

编辑：似乎我以为z-index:0与auto相同的假设是错误的。确实，它不能与0一起使用，因此也不能与5000一起使用。我很抱歉。

关于html - 如何堆叠此Z-index配置？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17586306/