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

Question

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

78

请参考下面的代码：

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

从上面的代码中，我们知道我们只能看到黑色背景的100像素高度。

如何看到500像素高度的<div>黑色背景呢？换句话说，我如何使<div>出现在<li>的前面？

- zac1987

1

我不知道有任何浏览器在你的例子中只会呈现100像素的高度。 - BoltClock

aroth的答案对我有用 :D (Y) - Gustavo Amaro

1

这个视频非常有帮助，可以帮助理解它的工作原理。 - J0ANMM

6个回答

22

为了让一个元素出现在另一个元素的前面，您需要给前面的元素更高的z-index值，并给后面的元素较低的z-index值，同时您应该指定position: absolute/fixed...

例如：

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

- Jasur Shukurov

这正是我所需要的，因为我想在谷歌地图上放置一个div。 - rotimi-best

20

你可以在CSS中设置z-index。

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

- Greg Randall

6

使用更高的z-index来设置上层div，使用较低的z-index来设置下层div，然后使用absolute/fixed/relative定位。

- dinuka saminda

5

黑色的 div 将显示完整的500像素，除非100像素的 li 上设置了 overflow:hidden。

- David John Smith

1

我觉得你漏掉了什么。

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中，这将显示一个100像素的黑色条，后跟一个500像素的红色块。

稍微不同的例子：

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>

- Jared Farrish

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aroth · Accepted Answer

使用CSS的z-index属性。具有更大 z-index 值的元素会位于 z-index 值较小的元素之前。

请注意，为了使其生效，您还需要在所有要排序的元素上都设置 position 样式（position:absolute、position:relative 或 position:fixed）。