我不知道是否有问题，但我想知道为什么 overflow:hidden 在 fixed 父/子元素上不起作用。
这是一个例子：
CSS 和 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>现场演示：jsFiddle
【问题讨论】：
标签： css overflow parent fixed children
您可以考虑使用 CSS clip: rect(top, right, bottom, left); 将固定定位的元素剪辑到父元素。请参阅http://jsfiddle.net/lmeurs/jf3t0fmf/ 的演示。
当心，小心使用！
虽然剪辑样式得到广泛支持，但主要缺点是：
auto 值等于100%，即。 clip: rect(auto, auto, auto, auto);;请参阅http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ 了解更多信息。
编辑：Chrome 似乎在应用 backface-visibility 时更好地处理子元素的定位和 CSS3 转换，所以为了确保我们添加了：
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
到主要的子元素。
另请注意，旧版/移动浏览器不完全支持它，否则可能需要一些额外的努力。在bellafuchsia.com 上查看我们的菜单实现。
编辑 2014-11-02：演示 URL 已更新。
【讨论】：
iOS Safari 5+ repaints the clipped content on scroll after scrolling;iOS 8 Safari（即使在更新之后）似乎仍然如此。 The rect coordinates do not support percentages 但我们可以为 .parent 提供所需的百分比尺寸。
clip is now deprecated。展望未来，我们应该使用clip-path 属性。除了clip: rect(auto, auto, auto, auto);，我们还应该包括clip-path: inset(0 0 0 0);
clip 可能已被弃用，但 IE11 或 Edge 仍不支持 clip-path。我现在将使用clip。
因为固定位置的元素相对于视口是固定的，而不是另一个元素。因此，由于视口没有将其截断，溢出变得无关紧要。
而元素的位置和尺寸 position:absolute 相对于它的包含块，位置 和 position:fixed 元素的尺寸总是相对的 到初始包含块。这通常是视口： 浏览器窗口或论文的页面框。
参考：http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning
【讨论】：
2016 年更新：
您可以创建一个新的堆叠上下文，如 Coderwall 所示：
<div style="transform: translate3d(0,0,0);overflow:hidden">
<img style="position:fixed; ..." />
</div>
指的是http://dev.w3.org/csswg/css-transforms/#transform-rendering
对于布局由 CSS 盒子模型控制的元素，除了 none 之外的任何转换值都会导致创建堆叠上下文和包含块。该对象充当固定定位后代的包含块。
【讨论】：
position: fixed; of child 没有按预期工作。
作为使用剪辑的替代方法，您还可以在父元素上使用{border-radius: 0.0001px}。它不仅适用于绝对/固定定位元素。
【讨论】：
如果你想在固定位置的元素上隐藏溢出，我发现的最简单的方法是将元素放在容器元素内，然后将 position:fixed 和 overflow:hidden 应用于该元素而不是包含的元素 (您必须从包含的元素中删除 position:fixed 才能使其正常工作）。固定容器的内容应该会按预期被剪裁。
在我的情况下，我在固定位置元素上使用object-fit:cover 时遇到了问题（它溢出到页面主体的边界之外，无论overflow:hidden 是什么）。将其放置在一个固定的容器中，并在容器上使用overflow:hidden 解决了这个问题。
【讨论】：
固定位置元素是相对于浏览器窗口定位的，所以父元素基本上是无关的。
要获得您想要的效果，其中父级上的overflow 剪辑子级，请改用position: absolute：http://jsfiddle.net/DBHUv/1/
【讨论】：
我在流畅的布局中遇到了一个类似的、相当复杂的问题，其中右栏的宽度是固定的，而左栏的宽度是灵活的。我的固定容器应该与灵活列具有相同的宽度。这是我的解决方案：
HTML
<div id="wrapper">
<div id="col1">
<div id="fixed-outer">
<div id="fixed-inner">inner</div>
</div>
COL1<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="col2">COL2</div>
</div>
CSS
#wrapper {
padding-left: 20px;
}
#col1 {
background-color: grey;
float: left;
margin-right: -200px; /* #col2 width */
width: 100%;
}
#col2 {
background-color: #ddd;
float: left;
height: 400px;
width: 200px;
}
#fixed-outer {
background: yellow;
border-right: 2px solid red;
height: 30px;
margin-left: -420px; /* 2x #col2 width + #wrapper padding-left */
overflow: hidden;
padding-right: 200px; /* #col2 width */
position: fixed;
width: 100%;
}
#fixed-inner {
background: orange;
border-left: 2px solid blue;
border-top: 2px solid blue;
height: 30px;
margin-left: 420px; /* 2x #col2 width + #wrapper padding-left */
position: absolute;
width: 100%;
}
【讨论】：