不能让z-index在另一个div中工作?

I'm trying to get a drop down menu to work. It consists of an LI with a DIV that appears when the LI is hovered. I want the parent to be drawn in front of the child so that I can create a tabbed effect with the overlapping borders. I can't get the child to be drawn behind the parent.

我想要一个下拉菜单。它由一个带DIV的LI组成，当LI悬空时出现。我希望将父元素绘制在子元素的前面，这样我就可以创建具有重叠边框的选项卡式效果。我不能把孩子拉到父母后面去。

The following code has the same problem:

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

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

And the CSS

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

The above code will draw test_2 in FRONT of test_1. I want test_2 to be drawn BEHIND test_1. How can I get it to do that? Thanks for any help.

上面的代码将在test_1前面绘制test_2。我想在test_1后面绘制test_2。我要怎么做呢?感谢任何帮助。

1 个解决方案

#1

A positioned container always contains its children. You can't have the content of a container below the container itself. See this test file that I made (about 7 years ago) showing the situation.

一个定位的容器总是包含它的子元素。容器本身下面不能有容器的内容。请查看我在大约7年前制作的这个测试文件，该文件显示了这种情况。

Note in particular that the dark blue div is z-index:-100, but doesn't appear below its z-index:3 parent container, nor below a different z-index:2 container that is its "uncle" (sibling of its parent).

特别要注意的是，深蓝色div是z-index:-100，但不会出现在其z-index:3父容器之下，也不会出现在另一个z-index:2个容器下，即它的“叔叔”(其父容器的兄弟)。

The z-index of an element is only valid with respect to other elements using the same positioned container. Once you set position:relative on test_1 you are causing its z-index to be in a different world than the z-index of test_2. The closest you can do is set #test_2 { z-index:-1 } to cause it to appear below the content of #test_1 (but not below its background).

元素的z索引仅对使用相同位置容器的其他元素有效。一旦设置了position:相对于test_1，就会导致它的z索引与test_2的z索引处于不同的世界。您所能做的最接近的事情是设置#test_2 {z-index:-1}，使它出现在#test_1的内容下面(但不低于它的背景)。