Mengapa Tidak Overflow:hidden Berfungsi dengan DIV Dalaman yang Diposisikan Benar Melainkan DIV Luar Diposisikan Secara Relatif?

Limpahan Tersembunyi dan Kedudukan Mutlak

Dalam senario dengan DIV bersarang, di mana DIV luar mempunyai limpahan: sifat tersembunyi dan DIV dalam diletakkan secara mutlak, DIV dalam mungkin tidak mematuhi kekangan limpahan luar DIV. Ini berlaku apabila DIV luar tidak diletakkan secara mutlak juga. Mengubah DIV luar kepada kedudukan: mutlak boleh mengganggu reka letak keseluruhan.

Untuk menangani isu ini sambil mengekalkan kedudukan DIV dalam yang diingini dalam sel jadual, pendekatan lain boleh digunakan:

1. Tetapkan DIV luar kepada kedudukan: relatif. Ini mewujudkan sistem koordinat baharu untuk DIV dalam.
2. Tukar kedudukan DIV dalam kepada kedudukan: mutlak. Ini meletakkan DIV dalam berbanding nenek moyangnya yang paling dekat, yang dalam kes ini ialah DIV luar.

Contoh:

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

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

Dengan pelarasan ini, limpahan: sifat tersembunyi DIV luar kini akan mengekang DIV dalam dengan betul, menghalang kandungannya daripada melangkaui sempadan DIV luar. Selain itu, penyelesaian ini membolehkan DIV dalaman berkembang di luar sel jadual, seperti yang dimaksudkan.

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