Mengapa Tidak `overflow: hidden` Berfungsi pada DIV Dalaman yang Berkedudukan Benar Melainkan DIV Luar Diposisikan Secara Relatif?

Kedudukan Mutlak dan Limpahan Tersembunyi

Apabila berurusan dengan DIV bersarang, adalah sukar untuk mengawal paparan DIV dalaman dalam batasan DIV luar, terutamanya apabila menggunakan sifat seperti limpahan tersembunyi. Soalan ini mengkaji senario khusus di mana DIV luar tidak diletakkan secara mutlak, menyebabkan DIV dalam diposisikan secara mutlak mengabaikan arahan tersembunyi limpahan DIV luar.

Untuk menangani isu ini, penyelesaian yang dicadangkan melibatkan menukar kedudukan daripada DIV luar kepada relatif dan mengekalkan kedudukan mutlak DIV dalam. Begini caranya:

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

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

Dengan menetapkan DIV luar kepada kedudukan: relatif, anda mewujudkan sistem koordinat baharu dalam elemen itu, yang berfungsi sebagai titik rujukan untuk kedudukan DIV dalam. Ini membolehkan DIV dalam kekal berlabuh pada DIV luar sambil mematuhi kekangan tersembunyi limpahan DIV luar. Dalam konfigurasi ini, kandungan DIV dalam akan dipotong dalam sempadan DIV luar.

Sebagai alternatif, anda juga boleh mempertimbangkan untuk menggunakan position: fixed untuk DIV dalam, yang akan membetulkan kedudukannya berbanding dengan viewport. daripada DIV luar. Pendekatan ini mungkin memberikan lebih kawalan ke atas peletakan DIV dalam, terutamanya jika anda perlu meletakkannya di luar sempadan DIV luar.

Atas ialah kandungan terperinci Mengapa Tidak `overflow: hidden` Berfungsi pada DIV Dalaman yang Berkedudukan Benar Melainkan DIV Luar Diposisikan Secara Relatif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!