1

我有一种情况：

我的层次结构是：

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

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

所有元素都有一个非静态位置。

4

2 回答 2

1

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

因此，要获得您想要的效果，您需要 box1 和 box2 具有自动 z-index ... 请注意，正 z-index 将堆叠在 auto 之上，因此应该会给您想要的行为。

于 2013-07-11T16:34:56.417 回答
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;
}

然后 box2 被绘制在 box1 上（如果它们完全重叠的话）并且 box2_child 被绘制在 box1_child 上，但是两个孩子都被绘制在父框上。

js小提琴。

在各种较新的浏览器上进行了测试。我这里没有 Firefox 4，所以不能确认它在那里不起作用。

编辑：似乎我的假设z-index:0与auto. 事实上，它不适用于 0，因此它也不适用于 5000。我很抱歉。

于 2013-07-11T08:01:44.443 回答