不能让z-index在另一个div里面的div工作 [英] Can't get z-index to work for div inside of another div

问题描述

我正在尝试下拉菜单。它包含一个LI和DIV，当LI被悬停时出现。我想让父母被画在孩子面前，以便我可以用重叠的边框创建一个标签效果。我不能让孩子被吸引到父母身后。

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.

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

The following code has the same problem:

<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_2被绘制为BEHIND test_1。我该怎么做呢？感谢任何帮助。

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.

推荐答案

定位容器始终包含其子项。您不能在集装箱本身下方容纳容器的内容。请参阅我制作的此测试文件（约7年前），显示情况。

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.

请注意，深蓝色div是 z-index：-100 ，但不会出现在 z-index：3 父容器，也不在不同的 z-index：2 容器，它的叔叔它的父母）。

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).

元素的 z-index 仅对使用相同的其他元素有效定位容器。一旦您在 test_1 上设置 position：relative ，则导致其 z-index 与 z-index 的 test_2 在不同的世界。您最近可以设置＃test_2 {z-index：-1} ，使其显示在＃test_1 （但不低于其背景）。

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-index在另一个div里面的div工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！