无法让z-index适用于另一个div内的div

Question

我正试图让下拉菜单起作用.它包含一个带有DIV的LI,它在LI悬停时出现.我希望在孩子面前绘制父级,以便我可以创建具有重叠边框的选项卡式效果.我无法让孩子被吸引到父母身后.

以下代码具有相同的问题:

<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的FRONT中绘制test_2.我想在test_1之后绘制test_2.我怎么能这样做呢？谢谢你的帮助.

Answer 1

定位容器始终包含其子项.您不能在容器本身下方拥有容器的内容.查看我(大约7年前)制作的测试文件,显示了这种情况.

请特别注意,深蓝色div是z-index:-100,但不会出现在z-index:3其父容器下方,也不会出现在z-index:2其"叔叔"(其父级的兄弟)的不同容器之下.

的z-index元素的是仅相对于使用相同的定位的容器的其它元件有效.一旦您设置position:relative上test_1你是导致它z-index是在一个不同的世界比z-index的test_2.您可以做的最接近的设置#test_2 { z-index:-1 }是使其显示在#test_1(但不低于其背景)的内容之下.