CSS z-index 不工作(位置绝对值)

我试图使黑色 div(相对)以上的第二个黄色的(绝对)。黑色 div的父母也有一个绝对位置。

#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>

预期结果:

enter image description here

204990 次浏览
小开

只要把第二个. 绝对 div 加在第二个. second div 之前:

<div class="absolute" style="top: 54px"></div>
<div class="absolute">
<div id="relative"></div>
</div>

因为这两个元素的索引为0。

小开

这是因为 堆叠背景，设置 z-index 将使它也适用于所有子级。

你可以使两个 <div>兄弟姐妹而不是后代。

<div class="absolute"></div>
<div id="relative"></div>

Http://jsfiddle.net/p7c9q/3/

小开

试试这个代码:

.absolute {
position: absolute;
top: 0; left: 0;
width: 200px;
height: 50px;
background: yellow;


}

Http://jsfiddle.net/manojmcet/ks7ds/

小开
最佳答案

拿开

z-index:0;

从 .absolute。

更新小提琴。

小开

JSFiddle

你必须把第二个 div 放在第一个 div 的上面，因为它们的 z-index 都为零，这样 dom 中的顺序就决定了哪个在上面。这也会影响相对定位的 div，因为它的 z 索引与父 div 中的元素相关。

<div class="absolute" style="top: 54px"></div>
<div class="absolute">
<div id="relative"></div>
</div>

CSS 保持不变。

小开

这个怎么样？

Http://jsfiddle.net/p7c9q/4/

<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;
}

使用相对 div 作为包装，并让黄色 div 具有正常的定位。

那么只有黑块需要有一个绝对位置。

小开

我一直在努力弄明白如何在这样的图像上放一个 div: z-index working

无论我如何在 div (图像包装器)和我得到的部分中配置 z-index:

z-index Not working

原来我没有把这部分的背景设置成 background: white;

基本上就是这样:

<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 */
}
小开

我一直在努力解决这个问题，我学到了(感谢 这个的文章) :

不透明度也会影响 z 指数

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>

小开

我解决了我的 z-index的问题，使身体包装 z-index:-1和身体 z-index:-2，和其他 div z-index:1。

然后后面的 div 不工作，除非我有 z-index200 + 。尽管我在每个元素上都有 position:relative，但是在主体默认为 z-index的情况下，它不会工作。

希望这对谁有帮助。


提交答案