Rumah  >  Artikel  >  hujung hadapan web  >  Bolehkah DIV Dalaman Berkedudukan Mutlak Menghormati `limpahan: tersembunyi` Induknya Tanpa Meletakkan DIV Luar dengan Benar?

Bolehkah DIV Dalaman Berkedudukan Mutlak Menghormati `limpahan: tersembunyi` Induknya Tanpa Meletakkan DIV Luar dengan Benar?

Susan Sarandon
Susan Sarandonasal
2024-11-25 02:07:20503semak imbas

Can an Absolutely Positioned Inner DIV Respect its Parent's `overflow: hidden` Without Absolutely Positioning the Outer DIV?

Bolehkah DIV Bersarang dengan Kedudukan Patuh Mutlak Limpahan Tersembunyi Tanpa Kedudukan Mutlak DIV Luar?

Dalam senario di mana dua DIV bersarang , dengan DIV luar diposisikan secara normal dan DIV dalam diposisikan secara mutlak, DIV dalam mungkin tidak mematuhi sifat limpahan tersembunyi DIV luar.

Untuk menyelesaikan isu ini tanpa menggunakan kedudukan mutlak DIV luar, yang boleh mengganggu reka letak yang dimaksudkan, pertimbangkan perkara berikut:

Kedudukan Relatif untuk DIV Luar dan Mutlak untuk Dalam DIV

Letakkan DIV luar sebagai kedudukan: relatif, dan DIV dalam sebagai kedudukan: mutlak. Ini membolehkan DIV dalaman mewarisi kedudukan relatif induknya dan mematuhi sifat limpahan tersembunyi.

Kod Contoh:

#first {
    ...
    position: relative;
    overflow: hidden;
}

#second {
    ...
    position: absolute;
}

Dengan konfigurasi ini, bahagian dalam DIV akan diletakkan secara mutlak dalam DIV luar dan akan menghormati sifat limpahan tersembunyinya, dengan berkesan menyembunyikan sebarang limpahan kandungan.

Nota: Jika DIV dalaman perlu "tumbuh" daripada sel jadual (TD), penyelesaian ini mungkin tidak sesuai.

Pilihan Alternatif

Dalam kes di mana kedudukan relatif untuk DIV dalam bukan pilihan, pertimbangkan untuk menggunakan teknik keratan CSS. Buat laluan keratan untuk DIV luar dan gunakannya pada DIV dalam. Ini membolehkan DIV dalam berkembang melebihi sempadan DIV luar, sambil tetap menghormati sempadan limpahannya.

Kod Contoh:

#outer-container {
    position: relative;
    width: 200px;
    height: 200px;
}

#inner-element {
    width: 400px;
    height: 400px;
    clip-path: path("M0 0 L 200 0 L 200 200 L 0 200 Z");
}

Atas ialah kandungan terperinci Bolehkah DIV Dalaman Berkedudukan Mutlak Menghormati `limpahan: tersembunyi` Induknya Tanpa Meletakkan DIV Luar dengan Benar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn