css - 无法让 z-index 为另一个 div 内的 div 工作

Question

我正在尝试让下拉菜单起作用。它由一个 LI 和一个 DIV 组成，DIV 在 LI 悬停时出现。我希望将父对象绘制在子对象的前面，这样我就可以创建带有重叠边框的选项卡式效果。我无法让 child 被吸引到 parent 身后。

下面的代码有同样的问题:

<div id="test_1">
    Test 1
    <div id="test_2">
        Test 2
    </div>
</div>

和 CSS

#test_1 {
    border:1px solid green;
    width:200px;
    height:200px;
    background-color:#fff;
    position:relative;
    z-index:999;
}

#test_2{
    border:1px solid red;
    width:200px;
    height:200px;
    background-color:#fff;
    position:relative;
    top:-10px;
    left:-10px;
    z-index:900;
}

以上代码将在 test_1 的前面绘制 test_2。我希望将 test_2 绘制在 test_1 后面。我怎样才能做到这一点？感谢您的帮助。

Answer 1

定位的容器总是包含它的子容器。您不能在容器本身下方放置容器的内容。参见 this test file我(大约 7 年前)所做的展示了这种情况。

特别注意深蓝色的div是z-index:-100，但是没有出现在它的z-index:3父容器下面，也没有出现在下面一个不同的 z-index:2 容器，它是它的“叔叔”(它的父级的兄弟)。

元素的 z-index 仅对使用相同定位容器的其他元素有效。在 test_1 上设置 position:relative 后，您将导致其 z-index 与 z-index 处于不同的世界test_2 的。最接近的做法是设置 #test_2 { z-index:-1 } 使其显示在 #test_1 的内容下方(但不在其背景下方)。