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

【问题标题】：How to make div appear in front of another?如何让 div 出现在另一个前面？
【发布时间】：2011-04-01 14:03:41
【问题描述】：

<div style="position:relative; overflow:hidden; height:300px; z-index:1; background-color:red;">
    <ul style="position:relative; overflow:hidden; height:800px; z-index:2; background-color:blue;">
        <li>
            <div style="height:500px; background-color:black; position:relative; z-index:3;">
            This is div
            </div>
        </li>
    </ul>
</div>

第一个问题-从上面的代码中，网页只显示<ul>的300px高度和<div>的300px高度，如何使网页显示<ul>的800高度和<div>的500px高度而不改变溢出属性并且不改变第一个<div>(300px) 的高度？已经从 Omabena 那里得到了答案。我只需要将第一个 div 的位置更改为静态，将 ul 更改为绝对。

<div style="overflow:hidden; position:static; height:300px;  background-color:red;">
<ul style=" position: absolute; overflow:hidden; height:1500px; background-color:blue;">
    <li>
        <table><tr><td>
            <div style="height:500px; background-color:black; position:static; z-index:3;">
                This is 2nd div
            </div>
        </td>
        <td>
            <div style="height:500px; background-color:green; position:relative; z-index:3;">
                This is 3rd div
            </div>
        </td></tr></table>
    </li>
</ul>
</div>

第二个问题 - 从上面的代码中，如何使网页显示 2nd div 的 300px 高度和 3rd div 的 500px 高度。我的意思是第二个 div 必须隐藏在只有 300px 高度的第一个 div 内。

【问题讨论】：

我猜你想试试绝对定位。
我测试了位置：absolute，最终所有的div和ul都没了，网页显示为空。

标签： html css

【解决方案1】：

<div style="overflow:hidden; height:300px;  background-color:red;">
<ul style=" position: absolute;overflow:hidden; height:800px; background-color:blue;">
    <li>
        <div style="height:500px; background-color:black; position:relative; z-index:3;">
        This is div
        </div>
    </li>
</ul>

【讨论】：

不确定这是否适合您。
哇。凉爽的。我想我已经知道我的问题是什么了。谢谢你。我还有其他问题，请参阅我更新的问题。谢谢。
第二个问题对我来说看起来很棘手，不知道如何在不改变你的 html 标记或破坏 CSS 的自然流程的情况下做到这一点

【解决方案2】：

答案已经存在。

Position an HTML element relative to its container using CSS

【讨论】：

不，答案不存在，你给我看的链接是关于 left, top, position 与我的问题无关的属性。

【解决方案3】：

<div style="position:relative; overflow:hidden; height:800px; z-index:1; background-color:red;">
    <ul style="position:relative; overflow:hidden; height:800px; z-index:2; background-color:blue;">
    <br/>
        <li>
            <div style="height:500px; background-color:white; position:relative; z-index:3;">
            This is div
            </div>
        </li>
    </ul>
</div>

【讨论】：

不改变第一个<div>(300px)的高度怎么样？我已经更新了我的问题。谢谢。

【解决方案4】：

dose div 必须嵌套你可以使用容器 div 并让你的第一个 div 和 UL 在同一级别然后使用 position:absolute 两个

【讨论】：

我不知道你在说什么。是的，我可以使用容器 div。什么是“你有 1st div 在同一级别”是什么意思？