无法获得z-index工作的div在另一个div [英] Can't get z-index to work for div inside of another div
问题描述
我想要一个下拉菜单工作。它由一个LI和一个DIV，当LI悬停时出现。我希望父绘制在孩子的前面，这样我可以创建一个带有重叠边框的标签效果。
以下代码具有相同的问题：
< div id =test_1>
测试1
< div id =test_2>
测试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。我怎么能得到它呢？非常感谢您的帮助。
定位的容器总是包含它的孩子。您不能将容器的内容放在容器本身下面。请参阅我所做的（大约7年前）此测试文件，了解情况。
特别注意，深蓝色div是 z-index：-100 ，但不会出现在它的索引：3 父容器，也不在不同的 z-index：2 容器，它是其叔叔 / p>
元素的 z-index 仅对使用相同位置的容器的其他元素有效。一旦在 test_1 上设置 position：relative ，则会导致其 z-index 位于与 test_2 的 z-index 不同的世界中。您最近可以做的是设置＃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屋！
