CSS z-index不起作用(绝对位置)

Question

我试图使黑色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>

预期结果:

Answer 1

去掉

z-index:0;

来自.absolute.

这里更新了小提琴.

Answer 2

这是因为堆叠上下文,设置z-index也会使它适用于所有孩子.

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

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

http://jsfiddle.net/P7c9q/3/

Answer 3

我正在努力解决这个问题,我学到了(感谢这篇文章):

不透明度也会影响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>

Answer 4

我正在努力弄清楚如何将 div 放在这样的图像上：

无论我如何在两个 div（图像包装器）和我得到的部分中配置 z-index：

原来我没有把这个部分的背景设置为 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 */
}