CSS z-index不工作（绝对位置）

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

码：

<div class="absolute"> <div id="relative"></div> </div> <div class="absolute" style="top: 54px"></div> <style> #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; } </style> 

jsFiddle： http : //jsfiddle.net/P7c9q/

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

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

不pipe我如何在两个div（图像包装器）中configurationz-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 */ } 

Answer 4

我正在努力解决这个问题，并且我学到了（感谢这篇文章）：

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

Answer 5

只需在第二个div之前添加第二个.absolute div：

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

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

Answer 6

试试这个代码：

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

http://jsfiddle.net/manojmcet/ks7ds/

Answer 7

的jsfiddle

您必须将第二个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保持不变。

Answer 8

这个怎么样？

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有正常的定位。

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