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

Question

请参考以下代码:

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

从上面的代码中,我们知道我们只能看到100px高度的黑色背景.我的问题是我们怎么能看到500px高度的<div>黑色背景？换句话说,我怎样才能让<div>出现在前面<li>呢？

Answer 1

使用CSS z-index属性.具有较大z-index值的元素位于具有较小z-index值的元素的前面.

需要注意的是这个工作,你还需要设置一个position样式(position:absolute,position:relative或position:fixed两者)/你要订购的元素.

Answer 2

您可以在css中设置z-index

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

Answer 3

为了让一个元素出现在另一个元素的前面，你必须给前面的元素提供更高的 z-index，给后面的元素提供更低的 z-index，你也应该指出 position: absolute/fixed...

例子：

<div style="z-index:100; position: fixed;">Hello</div>
<div style="z-index: -1;">World</div>

Answer 4

div除非overflow:hidden在100px上设置,否则黑色将显示完整的500pxli

Answer 5

上 div 使用较高的 z-index，下 div 使用较低的 z-index，然后使用绝对/固定/相对位置