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

Question

<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>

第一个问题 - 从上面的代码，网页显示 300px 高度为 <ul>和 <div> 的 300 像素高度只是，如何让网页显示<ul>的800高度和 <div> 的 500 像素高度无需更改溢出属性且无需更改第一个 <div> 的高度(300 像素)？已经从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>

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

Answer 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>