父母与孩子的位置固定，父母溢出：隐藏的错误
我不知道是否有问题，但我想知道为什么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
因为固定位置元素相对于视口是固定的，而不是另一个元素。 因此，由于视口不切断，溢出变得无关紧要。
位置：绝对的元素的位置和尺寸是相对于其包含的块的，而位置：固定的元素的位置和尺寸总是相对于初始的包含块。 这通常是视口：浏览器窗口或纸张的页面框。
ref： http : //www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning
你可以考虑使用CSS clip: rect(top, right, bottom, left); 将一个固定的定位元素剪切到父项。 请参阅http://jsfiddle.net/lmeurs/jf3t0fmf/上的演示。;
当心，小心使用！
尽pipe剪辑风格得到广泛支持，但主要缺点是：
- 家长的位置不能是静态的或相对的（可以在相对定位的容器内使用绝对定位的父母）;
- 矩形坐标不支持百分比，虽然
auto值等于100%，即。clip: rect(auto, auto, auto, auto);; - 至less在IE11和Chrome34中，有子元素的可能性是有限的，即。 我们不能将子元素的位置设置为相对或绝对位置，或者使用像scale这样的CSS3变换。
有关更多信息，请参阅http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ 。
编辑：Chrome似乎处理的位置和CSS3变换应用背面知名度的时候很好很多，所以只是为了确保我们添加了：
-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden;
到主要的子元素。
另外请注意，旧版/移动版浏览器不能完全支持，或者需要额外的努力。 请参阅我们在bellafuchsia.com上的菜单实施。
- IE8显示菜单很好，但菜单链接不可点击;
- IE9不显示折叠下的菜单;
- iOS Safari <5不能很好地显示菜单;
- 滚动后，iOS Safari 5+重新滚动剪辑的内容;
- FF（至less13+），Android的IE10 +，Chrome和Chrome似乎打得不错。
编辑2014-11-02：演示url已更新。
2016更新：
您可以创build一个新的堆栈上下文，如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框模型控制的元素，转换之外的任何值都不会导致创build堆栈上下文和包含块。 该对象充当固定位置后代的包含块。
如果你想隐藏固定位置元素的溢出，我发现最简单的方法是将元素放置在一个容器元素中，并应用position:fixed和overflow:hidden到该元素，而不是包含的元素（您必须删除position:fixed从包含的元素position:fixed为此工作）。 那么固定容器的内容应该按照预期被剪裁。
在我的情况下，我在使用object-fit:cover遇到了问题object-fit:cover在一个固定位置的元素上object-fit:cover （溢出页面主体的边界，而不pipeoverflow:hidden ）。 把它放在一个带有overflow:hidden的固定容器内overflow:hidden在容器上，解决了问题。
固定位置元素是相对于浏览器窗口定位的，所以父元素基本上是不相关的。
为了得到你想要的效果，在父级上的overflow剪辑孩子，使用position: absolute代替： http : //jsfiddle.net/DBHUv/1/
我有一个stream体布局类似，相当复杂的问题，其中右列有一个固定的宽度，而左列有一个灵活的宽度。 我的固定容器应该与柔性柱具有相同的宽度。 这是我的解决scheme：
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%; }
现场演示 ： http : //jsfiddle.net/hWCub/
