如何让div出现在另一个前面？

请参阅下面的代码：

<ul> <li style="height:100px; overflow:hidden;"> <div style="height:500px; background-color:black;"> </div> </li> </ul> 

从上面的代码，我们知道，我们只能看到黑色背景100px的高度。 我的问题是我们如何看到500像素的黑色背景的高度？ 换句话说，我怎样才能让<div>出现在<li>前面？

Answer 1

使用CSS z-index属性。 具有更大z-索引值的元素位于具有更小z-索引值的元素的前面。

请注意，为此，您还需要在要订购的所有元素上设置position样式（ position:absolute ， position:relative或position:fixed ）。

Answer 2

除非overflow:hidden ，黑色div将显示全部500px overflow:hidden设置在100px li

Answer 3

你可以在css中设置z-index

 <div style="z-index: -1"></div> 

Answer 4

我想你错过了一些东西。

http://jsfiddle.net/ZNtKj/

 <ul> <li style="height:100px;overflow:hidden;"> <div style="height:500px; background-color:black;"> </div> </li> </ul> <ul> <li style="height:100px;"> <div style="height:500px; background-color:red;"> </div> </li> </ul> 

在FF4中，这显示了一个100px的黑色条，接着是一个500px的红色块。

有点不同的例子：

http://jsfiddle.net/ZNtKj/1/

 <ul> <li style="height:100px;overflow:hidden;"> <div style="height:500px; background-color:black;"> </div> </li> </ul> <ul> <li style="height:100px;"> <div style="height:500px; background-color:red;"> </div> </li> <li style="height:100px;overflow:hidden;"> <div style="height:500px; background-color:blue;"> </div> </li> <li style="height:100px;overflow:hidden;"> <div style="height:500px; background-color:green;"> </div> </li> </ul> 

Answer 5

较高的div使用较高的z-指数，较低的div使用较低的z-指数，然后使用绝对药水