Mengapa `overflow: hidden` Tidak Berfungsi pada Elemen Ibu Bapa dan Anak yang Berposisi Tetap?

Limpahan:tersembunyi Tidak Berfungsi pada Elemen Ibu Bapa/Kanak-Kanak Tetap

Soalan:

Mengapa limpahan tidak: fungsi harta tersembunyi pada ibu bapa/anak tetap elemen?

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;
}

<div class="parent">
  <div class="children"></div>
</div>

Jawapan:

Klip CSS: rect() can clip elemen kedudukan tetap kepada induknya. Walau bagaimanapun, ia mempunyai beberapa kaveat:

• Kedudukan ibu bapa tidak boleh statik atau relatif.
• Peratusan tidak disokong untuk koordinat tepat (walaupun auto bersamaan dengan 100%).
• Elemen kanak-kanak mungkin mempunyai kedudukan terhad dan transformasi CSS3 pilihan.

Lihat demo JSFiddle yang dikemas kini untuk contoh penggunaan klip: rect().

Nota Tambahan:

• Gunakan keterlihatan belakang: disembunyikan pada elemen kanak-kanak untuk sokongan yang lebih baik dalam Chrome.
• Sokongan untuk yang lebih tua dan penyemak imbas mudah alih mungkin terhad.

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