首頁 > web前端 > css教學 > 為什麼「overflow:hidden」不適用於固定位置的父元素和子元素?

為什麼「overflow:hidden」不適用於固定位置的父元素和子元素?

Barbara Streisand
發布: 2024-12-04 18:24:11
原創
232 人瀏覽過

Why Doesn't `overflow: hidden` Work on Fixed Positioned Parent and Child Elements?

溢位:隱藏在固定父/子元素上不起作用

問題:

為什麼不溢父/子上的隱藏屬性功能元素?

範例:

.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>
登入後複製

答案:

CSS 剪輯: rect() 可以剪輯其父元素的固定定位元素。但是,它有一些警告:

  • 父級的位置不能是靜態或相對的。
  • 直角座標不支援百分比(儘管 auto 相當於 100%)。
  • 子元素可能具有有限的定位和 CSS3 轉換options.

請參閱更新的 JSFiddle 演示,以了解使用剪輯的範例:rect()。

附加說明:

  • 使用 backface-visibility:hidden 在子元素上以改善 Chrome 中的支援。
  • 支援對於舊版瀏覽器和行動瀏覽器可能會受到限制。

以上是為什麼「overflow:hidden」不適用於固定位置的父元素和子元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板