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

黑色div将显示完整的500px，除非在{100} overflow:hidden

上设置了li

Answer 4

要使一个元素出现在另一个元素的前面，您必须给前面的元素一个较高的z-index，给后面的元素一个较低的z-index，还要标出>>> x = mystruct(10) >>> x[4] = 1.2 >>> print(x[4]) 1.2 >>> import copy >>> y = copy.deepcopy(x) >>> print(y[4]) 1.2 >>> y[4] = 3.4 >>> print(y[4]) 3.4 >>> print(x[4]) # check it hasn't changed 1.2

示例：

position: absolute/fixed...

Answer 5

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

Answer 6

我认为你错过了什么。

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>

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

6 个答案: