无法让 z-index 为另一个 div 内的 div 工作 [英] Can't get z-index to work for div inside of another div

问题描述

我正在尝试使用下拉菜单.它由一个带有 DIV 的 LI 组成，当 LI 悬停时会出现该 DIV.我希望在孩子面前绘制父级，以便我可以创建带有重叠边框的选项卡效果.我不能让孩子被拉到父母身后.

以下代码有同样的问题:

测试 1<div id="test_2">测试 2

和 CSS

#test_1 {边框:1px 纯绿色；宽度:200px；高度:200px；背景色:#fff;位置:相对；z-索引:999；}#test_2{边框:1px 纯红色；宽度:200px；高度:200px；背景色:#fff;位置:相对；顶部:-10px;左:-10px;z-索引:900；}

上面的代码将在 test_1 的 FRONT 中绘制 test_2.我希望在 test_1 后面绘制 test_2.我怎样才能让它做到这一点?感谢您的帮助.

解决方案

定位容器始终包含其子项.您不能在容器本身下方放置容器的内容.请参阅我(大约 7 年前)制作的显示情况的这个测试文件.

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

元素的 z-index 仅对使用相同定位容器的其他元素有效.一旦你在 test_1 上设置了 position:relative，你就会导致它的 z-index 与 z-index 处于不同的世界test_2 的 .您可以做的最接近的是设置 #test_2 { z-index:-1 } 使其出现在 #test_1 的内容下方(但不在其背景下方).

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>

And the 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.

解决方案

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.

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

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屋！