CSS 无法让 z-index 为另一个 div 内的 div 工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4456234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't get z-index to work for div inside of another div
提问by Cyrcle
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 悬停时会出现该 DIV。我希望在孩子面前绘制父级，以便我可以创建带有重叠边框的选项卡效果。我不能让孩子被吸引到父母身后。
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 的 FRONT 中绘制 test_2。我希望在 test_1 后面绘制 test_2。我怎样才能让它做到这一点？谢谢你的帮助。
回答by Phrogz
A positioned container always contains its children. You can't have the content of a container below the container itself. See this test filethat 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:3parent container, nor below a different z-index:2container that is its "uncle" (sibling of its parent).
请特别注意，深蓝色 div 是z-index:-100，但不会出现在z-index:3其父容器下方，也不会出现在z-index:2作为其“叔叔”（其父项的兄弟姐妹）的不同容器下方。
The z-indexof an element is only valid with respect to other elements using the same positioned container. Once you set position:relativeon test_1you are causing its z-indexto be in a different world than the z-indexof 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元素的是仅相对于使用相同的定位的容器的其它元件有效。一旦您设置position:relative上test_1你是导致它z-index是在一个不同的世界比z-index的test_2。您可以做的最接近的设置#test_2 { z-index:-1 }是使其显示在内容下方#test_1（但不在其背景下方）。
回答by Matteus Barbosa
I can give you a common example about Bootstrap Modals. Consider that your #test_1 is my .modal-body and your #test_2 is my custom <select>box, OK? #test_2 is inside #test_1. Simple as that.
我可以给你一个关于 Bootstrap Modals 的常见例子。考虑到你的 #test_1 是我的 .modal-body 而你的 #test_2 是我的自定义<select>框，好吗？#test_2 在#test_1 里面。就那么简单。
I just have had to make sure #test_1 overflowcomputed property is not "auto" or "scroll" or "hidden", otherwise, the modal would cut my <select>box listing in the middle. My current .modal-bodyoverflow is initial
我只需要确保 #test_1overflow计算属性不是 "auto" 或 "scroll" 或 "hidden"，否则，模式会将我的<select>框列表切到中间。我目前的.modal-body溢出是initial
