Mengapa `overflow: hidden` Tidak Berfungsi pada Elemen Ibu Bapa/Kanak Berposisi Tetap dalam CSS?

Limpahan:tersembunyi Tidak berkesan pada Elemen Ibu Bapa/Kanak yang Diposisikan: Isu atau Mengikut Reka Bentuk?

Dalam CSS, limpahan:sifat tersembunyi menyembunyikan kandungan yang melangkaui sempadan elemen kontenanya. Walau bagaimanapun, tingkah laku yang tidak dijangka berlaku apabila cuba menggunakan sifat ini pada elemen yang diletakkan sebagai tetap, dengan elemen anak tetap. Pemangkasan limpahan yang dijangkakan tidak berlaku.

Contoh:

.parent {
  position: fixed;
  overflow: hidden;
  width: 300px;
  height: 300px;
  background: #555;
}
.children {
  position: fixed;
  top: 200px;
  left: 200px;
  width: 150px;
  height: 150px;
  background: #333;
}

Penjelasan:

Isu ini timbul daripada had dalam CSS: overflow:hidden hanya berkesan menyembunyikan kandungan dalam aliran elemen. Elemen yang diposisikan, seperti dengan position:fixed, dialih keluar daripada aliran biasa dan tidak mengambil bahagian dalam pengendalian limpahan.

Penyelesaian Alternatif: CSS Clip Property

Kepada mencapai gelagat keratan limpahan yang diingini pada elemen diposisikan, pertimbangkan untuk menggunakan sifat klip. Ia membolehkan anda menentukan kawasan segi empat tepat dalam elemen yang boleh dilihat atau tersembunyi.

Contoh:

.parent {
  position: fixed;
  clip: rect(0px, 300px, 300px, 0px);
  width: 300px;
  height: 300px;
  background: #555;
}

Awas:

• Kedudukan elemen induk tidak boleh statik atau relatif.
• Koordinat tepat tidak menyokong peratusan (kecuali untuk 'auto').
• Elemen kanak-kanak mungkin mempunyai pengehadan kedudukan dalam penyemak imbas tertentu, seperti IE dan Chrome.

Pertimbangan Tambahan:

• Tambah backface-visibility: tersembunyi; untuk meningkatkan pengendalian kedudukan elemen kanak-kanak dan perubahan CSS3.
• Pelayar mudah alih dan versi lama mungkin mempunyai sokongan terhad untuk sifat klip.

Atas ialah kandungan terperinci Mengapa `overflow: hidden` Tidak Berfungsi pada Elemen Ibu Bapa/Kanak Berposisi Tetap dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!