Question

我的情况是：

我的层次结构是：

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上。

这可能吗（在最近的浏览器上？）

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

Answer 1

即使两个相邻的元素具有相同的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被绘制在box1上（如果它们完全重叠）并且box2_child被绘制在box1_child上，但是两个子项都被绘制在父框上。

jsFiddle

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

编辑：我认为z-index:0与auto相同，似乎我错了。事实上它并不适用于0，所以它也不会与5000一起工作。道歉。

Answer 2

具有非自动z-index的事物形成了一个新的堆叠上下文，它以原子方式堆叠。

所以为了获得你想要的效果你需要box1和box2有自动z-index ...注意一个正的z-index将叠加在auto之上，所以这应该给你你想要的行为。

如何堆叠此Z-index配置？

2 个答案: