为什么'overflow:hidden”不适用于固定位置的父元素和子元素？-css教程-PHP中文网

为什么'overflow:hidden”不适用于固定位置的父元素和子元素？

Barbara Streisand

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

原创

246 人浏览过

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中文网其他相关文章！