Html 如何让div出现在另一个面前？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5480639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make div appear in front of another?
提问by zac1987
Please refer to the codes below :
请参考以下代码：
<ul>
<li style="height:100px; overflow:hidden;">
<div style="height:500px; background-color:black;">
</div>
</li>
</ul>
From the codes above, we know that we can only see 100px height of black background. My question is how can we see 500px height of <div>black background? In other words, how can I make the <div>appear in front of <li>?
从上面的代码中，我们知道我们只能看到黑色背景的 100px 高度。我的问题是我们如何才能看到 500px 的<div>黑色背景高度？换句话说，我怎样才能让<div>出现在 前面<li>？
回答by aroth
Use the CSS z-indexproperty. Elements with a greater z-index value are positioned in front of elements with smaller z-index values.
使用 CSS z-index属性。具有较大 z-index 值的元素位于具有较小 z-index 值的元素之前。
Note that for this to work, you also need to set a positionstyle (position:absolute, position:relative, or position:fixed) on both/all of the elements you want to order.
请注意，要使其正常工作，您还需要在要订购的两个/所有元素上设置position样式（position:absolute、position:relative、 或position:fixed）。
回答by Greg Randall
You can set the z-index in css
您可以在 css 中设置 z-index
<div style="z-index: -1"></div>
回答by Jasur Shukurov
In order an element to appear in front of another you have to give higher z-index to the front element, and lower z-index to the back element, also you have indicate position: absolute/fixed...
为了让一个元素出现在另一个元素的前面，你必须给前面的元素提供更高的 z-index，给后面的元素提供更低的 z-index，你也必须指出 position: absolute/fixed...
Example:
例子：
<div style="z-index:100; position: fixed;">Hello</div>
<div style="z-index: -1;">World</div>
回答by David John Smith
The black divwill display the full 500px unless overflow:hiddenis set on the 100px li
div除非overflow:hidden在 100px 上设置，否则黑色将显示完整的 500pxli
回答by dinuka saminda
Upper div use higher z-index and lower div use lower z-index then use absolute/fixed/relative position
上 div 使用较高的 z-index，下 div 使用较低的 z-index，然后使用绝对/固定/相对位置
回答by Jared Farrish
I think you're missing something.
我认为你错过了一些东西。
<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>
In FF4, this displays a 100px black bar, followed by a 500px red block.
在 FF4 中，这会显示一个 100 像素的黑色条，然后是一个 500 像素的红色块。
A little bit different example:
一个有点不同的例子：
<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>
