Css Can'；t使z-index在另一个div中为div工作

我正在尝试让下拉菜单工作。它由一个LI和一个DIV组成，当LI悬停时，该DIV会出现。我希望在子对象前面绘制父对象，以便创建具有重叠边框的选项卡效果。我不能让孩子跟在父母后面

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

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

---

上述代码将在测试_1之前绘制测试_2。我希望测试2落后于测试1。我怎样才能让它这么做？感谢您的帮助。

定位容器始终包含其子容器。容器的内容不能位于容器本身的下方。看看我（大约7年前）所做的展示情况

请特别注意，深蓝色div是

z-index:-100

，但不会出现在其

z-index:3

父容器的下方，也不会出现在作为其“叔叔”（其父容器的兄弟）的不同

z-index:2

容器的下方

---

元素的

z-index

仅对使用相同定位容器的其他元素有效。一旦您在

test_1

上设置

position:relative

，您将使其

z-index

与

test_2

的

z-index

处于不同的世界。最接近的方法是设置

#test_2{z-index:-1}

，使其显示在

#test_1

的内容下方（但不在其背景下方）。

我可以给您一个关于引导模态的常见示例。假设你的测试对象是我的MyType，你的Stest2是我的习惯<代码> <代码>框，好吗？测试2在测试1的内部。就这么简单

---

< P> >我必须要<强>确保“测试”1>代码>溢出< /代码>计算属性不是“自动”或“滚动”或“隐藏”< /强>，否则，模式将在中间剪切我的<代码> <代码>框列表。我当前的

.modal body

溢出是

initial

准确地说，您可以让子元素显示在父元素的直接内容下方（隐式位于

z-index:0

），但不能将它们放在父元素的背景之下。（这显示在测试文件中。）@Phrogz+1我不知道！精彩的z索引示例！！谢谢边界是如何运作的？我真的只需要父对象的边框显示在子对象的边框前面。@Cyrcle这对您来说很容易测试，但答案是边框与背景相同：子对象的边框将始终显示在父对象的边框上方。我想我会回来报告我所做的。Phrogz评论给了我需要的线索。我要做的是覆盖下拉菜单的div的部分边框，这样看起来就像是用户单击的选项卡的一部分。我将另一个div直接放在下拉列表之前，并将该div的宽度设置为选项卡的100%，z索引高于下拉列表中的div。这导致下拉列表的部分边框被覆盖，并提供了所需的效果。

#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;
}