Html CSS z-index 不起作用（绝对位置）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20971340/
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
CSS z-index not working (position absolute)
提问by HTMHell
I am trying to make the black div(relative) above the second yellow one (absolute). The black div's parent has a position absolute, too.
我试图使黑色div（相对）高于第二个黄色（绝对）。blackdiv的父级也有一个绝对位置。
#relative {
position: relative;
width: 40px;
height: 100px;
background: #000;
z-index: 1;
margin-top: 30px;
}
.absolute {
position: absolute;
top: 0; left: 0;
width: 200px;
height: 50px;
background: yellow;
z-index: 0;
}<div class="absolute">
<div id="relative"></div>
</div>
<div class="absolute" style="top: 54px"></div>Expected Result:
预期结果：
采纳答案by Hiral
回答by xec
This is because of the Stacking Context, setting a z-index will make it apply to all children as well.
这是因为Stacking Context，设置 z-index 将使它也适用于所有孩子。
You could make the two <div>s siblings instead of descendants.
你可以让两个<div>兄弟姐妹而不是后代。
<div class="absolute"></div>
<div id="relative"></div>
回答by Mohamed Ramrami
I was struggling with this problem, and I learned (thanks to thispost) that:
我一直在努力解决这个问题，我了解到（感谢这篇文章）：
opacity can also affect the z-index
不透明度也会影响 z-index
div:first-child {
opacity: .99;
}
.red, .green, .blue {
position: absolute;
width: 100px;
color: white;
line-height: 100px;
text-align: center;
}
.red {
z-index: 1;
top: 20px;
left: 20px;
background: red;
}
.green {
top: 60px;
left: 60px;
background: green;
}
.blue {
top: 100px;
left: 100px;
background: blue;
}<div>
<span class="red">Red</span>
</div>
<div>
<span class="green">Green</span>
</div>
<div>
<span class="blue">Blue</span>
</div>回答by juliangonzalez
I was struggling to figure it out how to put a div over an image like this:
我正在努力弄清楚如何将 div 放在这样的图像上：
No matter how I configured z-index in both divs (the image wrapper) and the section I was getting this:
无论我如何在两个 div（图像包装器）和我得到的部分中配置 z-index：
Turns out I hadn't set up the background of the section to be background: white;
原来我没有把这个部分的背景设置为 background: white;
so basically it's like this:
所以基本上是这样的：
<div class="img-wrp">
<img src="myimage.svg"/>
</div>
<section>
<other content>
</section>
section{
position: relative;
background: white; /* THIS IS THE IMPORTANT PART NOT TO FORGET */
}
.img-wrp{
position: absolute;
z-index: -1; /* also worked with 0 but just to be sure */
}
回答by edonbajrami
Just add the second .absolute div before the other .second div:
只需在另一个 .second div 之前添加第二个 .absolute div：
<div class="absolute" style="top: 54px"></div>
<div class="absolute">
<div id="relative"></div>
</div>
Because the two elements have an index 0.
因为这两个元素的索引为 0。
回答by Rasmus Stougaard
How about this?
这个怎么样？
<div class="relative">
<div class="yellow-div"></div>
<div class="yellow-div"></div>
<div class="absolute"></div>
</div>
.relative{
position:relative;
}
.absolute {
position:absolute;
width: 40px;
height: 100px;
background: #000;
z-index: 1;
top:30px;
left:0px;
}
.yellow-div {
position:relative;
width: 200px;
height: 50px;
background: yellow;
margin-bottom:4px;
z-index:0;
}
use the relative div as wrapper and let the yellow div's have normal positioning.
使用相对 div 作为包装器，让黄色 div 具有正常定位。
Only the black block need to have an absolute position then.
只有黑色块需要有一个绝对位置。
回答by Markus Kottl?nder
You have to put the second div on top of the first one because the both have an z-index of zero so that the order in the dom will decide which is on top. This also affects the relative positioned div because its z-index relates to elements inside the parent div.
您必须将第二个 div 放在第一个 div 的顶部，因为两者的 z-index 都为零，因此 dom 中的顺序将决定哪个在顶部。这也会影响相对定位的 div，因为它的 z-index 与父 div 内的元素相关。
<div class="absolute" style="top: 54px"></div>
<div class="absolute">
<div id="relative"></div>
</div>
Css stays the same.
CSS 保持不变。
回答by Manoj
try this code:
试试这个代码：
.absolute {
position: absolute;
top: 0; left: 0;
width: 200px;
height: 50px;
background: yellow;
}
回答by ax.falcon
I solved my z-indexproblem by making the body wrapper z-index:-1and the body z-index:-2, and the other divs z-index:1.
我z-index通过制作 body wrapperz-index:-1和 bodyz-index:-2以及其他 div解决了我的问题z-index:1。
And then the later divs didn't work unless I had z-index200+. Even though I had position:relativeon each element, with the body at default z-indexit wouldn't work.
然后除非我有z-index200+，否则后来的 div 不起作用。即使我position:relative在每个元素上都有，默认情况下z-index它也不起作用。
Hope this helps somebody.
希望这可以帮助某人。
