首页 >web前端 >css教程 >为什么'overflow:hidden”不适用于固定位置的父元素和子元素?

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

Barbara Streisand
Barbara Streisand原创
2024-12-04 18:24:11259浏览

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn