首页 > 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
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板