具有固定位置的父项和子项，父项溢出:隐藏错误
我不知道是否有问题，但我想知道为什么overflow:hidden在fixed父/子元素上不起作用。
下面是一个例子：
HTML和：
.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>
现场演示：
回答 6
Stack Overflow用户
发布于 2014-05-26 04:36:08
您可以考虑使用CSS clip: rect(top, right, bottom, left);将固定定位的元素裁剪到父元素。请参阅http://jsfiddle.net/lmeurs/jf3t0fmf/上的演示。
小心使用！
虽然剪辑样式被广泛支持，但主要缺点是：
- 父对象的位置不能是静态的或相对的(可以在相对定位的矩形坐标中使用绝对定位的父对象，尽管
auto值等于100%，即100%)。包含子元素的clip: rect(auto, auto, auto, auto);; - Possibillities被限制在至少IE11 & Chrome34中，即。我们不能将子元素的位置设置为相对或绝对，也不能使用类似缩放的CSS3变换。
有关详细信息，请参阅http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/。
编辑:在应用backface-visibility时，Chrome似乎能更好地处理对子元素的定位和CSS3转换，所以为了确认一下，我们添加了：
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;添加到主子元素。
还要注意的是，旧的/移动浏览器并不完全支持它，或者它可能需要一些额外的努力。查看我们在bellafuchsia.com上的菜单实现。
在scrolling;
- FF之后，
- IE8可以很好地显示菜单，但菜单链接不是很好；
- iOS Safari <5不能很好地显示菜单；
- iOS Safari 5+会在滚动上重新绘制剪切的内容(至少是13+)，IE10+、Chrome和Chrome clickable;
- IE9 Android似乎运行良好。
2014-11-02编辑: Demo URL已更新。
Stack Overflow用户
发布于 2018-06-09 19:43:37
作为使用clip的替代方法，您也可以在父元素上使用{border-radius: 0.0001px}。它不仅适用于绝对/固定定位的元素。
Stack Overflow用户
发布于 2016-12-16 00:40:24
如果您想隐藏固定位置元素上的溢出，我找到的最简单的方法是将元素放在容器元素中，并将position:fixed和overflow:hidden应用于该元素，而不是包含的元素(必须从包含的元素中删除position:fixed才能起作用)。然后，应按预期裁剪固定容器的内容。
在我的例子中，在固定位置的元素上使用object-fit:cover遇到了问题(不管overflow:hidden如何，它都会溢出到页面主体的边界之外)。将它放在一个固定的容器中，并将overflow:hidden放在容器上解决了这个问题。
https://stackoverflow.com/questions/12463658
复制相似问题