為什麼「overflow:hidden」對 CSS 中固定位置的父/子元素不起作用？

Overflow:hidden 對定位的父/子元素無效：問題還是設計使然？

在 CSS 中，overflow:hidden 屬性隱藏超出其容器元素邊界的內容。但是，當嘗試在定位為固定且具有固定子元素的元素上使用此屬性時，會發生意外行為。沒有發生預期的溢位截斷。

範例：

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

說明：

此問題源自CSS 中的限制：overflow:hidden能有效隱藏元素流中的內容。與position:fixed一樣，定位元素將從正常流中刪除，並且不參與溢出的處理。

替代解決方案：CSS Clip屬性

到在定位元素上實現所需的溢出裁剪行為，請考慮使用 Clip 屬性。它允許您在元素內定義可見或隱藏的矩形區域。

範例：

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

注意事項：

• 父元素的位置不能是靜態的元素或相對。
• 直角座標不支援百分比（「自動」除外）。
• 子元素在某些瀏覽器中可能有定位限制，例如 IE 和 Chrome。

其他注意事項：

• 增加背面可見性：隱藏；改善對子元素定位和 CSS3 轉換的處理。
• 行動瀏覽器和舊版可能對 Clip 屬性的支援有限。

以上是為什麼「overflow:hidden」對 CSS 中固定位置的父/子元素不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！