為什麼「overflow:hidden」不適用於固定位置的父元素和子元素？-css教學-PHP中文網

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

Barbara Streisand

發布： 2024-12-04 18:24:11

原創

242 人瀏覽過

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中文網其他相關文章！