无法让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年前）所做的this test file来说明情况。

请特别注意深蓝色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的内容下方（但不低于其背景）。

Answer 2

我可以给您一个有关Bootstrap Modals的常见示例。假设您的＃test_1是我的.modal-body，而＃test_2是我的自定义<select>框，好吗？ ＃test_2在＃test_1内部。就这么简单。

我只需要确保＃test_1 overflow计算出的属性不是“自动”，“滚动”或“隐藏” ，否则，模态将削减我的{{1 }}框在中间。我当前的<select>溢出是.modal-body