絕對定位與隱藏溢出

Question

我們有兩個DIV，一個嵌套在另一個裡面。如果外部DIV沒有設定為絕對定位，那麼絕對定位的內部DIV將不會遵循外部DIV的溢出隱藏。

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    overflow: hidden;
}

#second {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    left: 250px;
    top: 250px;
}

<div id="first">
    <div id="second"></div>
    <div id="third"></div>
</div>

有沒有辦法讓內部DIV遵循外部DIV的溢出隱藏，而不設定外部DIV為絕對定位（因為這會破壞我們的整體佈局）？ 同時，對於我們的內部DIV來說，相對定位也不是一個選項，因為我們需要「突出顯示」一個表格TD。

#first {
    width: 200px;
    height: 200px;
    background-color: green;
}

#second {
    width: 50px;
    height: 400px;
    background-color: red;
    position: relative;
    left: 0px;
    top: 0px;
}

<table id="first">
    <tr>
        <td>
            <div id="second"></div>
        </td>
    </tr>
</table>

還有其他選項嗎？

Answer 1

關於外部div使用position: relative呢？在隱藏內部div的例子中。由於沒有指定top或left，它也不會在佈局中移動。

Answer 2

將外部的<div> 設定為position: relative，內部的<div> 設定為position: absolute。這樣應該適用於您。