Kedudukan mutlak dan limpahan bersembunyi

Question

Kami mempunyai dua DIV, satu bersarang di dalam satu lagi. Jika DIV luar tidak ditetapkan untuk diposisikan secara mutlak, maka DIV dalam yang diposisikan secara mutlak tidak akan menghormati persembunyian limpahan DIV luar.

#first {
    lebar: 200px;
    ketinggian: 200px;
    warna latar belakang: hijau;
    limpahan: tersembunyi;
}

#second {
    lebar: 50px;
    ketinggian: 50px;
    warna latar belakang: merah;
    jawatan: mutlak;
    kiri: 250px;
    atas: 250px;
}

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

Adakah terdapat cara untuk menjadikan DIV dalam mengikut persembunyian limpahan DIV luar tanpa menetapkan DIV luar untuk diposisikan secara mutlak (kerana ini akan memecahkan reka letak keseluruhan kami)? Selain itu, kedudukan relatif bukan pilihan untuk DIV dalaman kita kerana kita perlu "menyerlahkan" jadual TD.

#first {
    lebar: 200px;
    ketinggian: 200px;
    warna latar belakang: hijau;
}

#second {
    lebar: 50px;
    ketinggian: 400px;
    warna latar belakang: merah;
    kedudukan: relatif;
    kiri: 0px;
    atas: 0px;
}

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

Adakah terdapat sebarang pilihan lain?

Answer 1

Bagaimana pula dengan penggunaan div luaranposition: relative? Dalam contoh menyembunyikan div dalam. Memandangkan bahagian atas atau kiri tidak dinyatakan, ia tidak akan bergerak dalam reka letak.

Answer 2

Tukar luaran <div> 设置为 position: relative，将内部的 <div> 设置为 position: absolute. Ini sepatutnya berfungsi untuk anda.