有固定位置的父母和孩子，父母溢出：隐藏的问题

Question

我不知道是否有问题，但我想知道为什么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

Answer 1

由于固定位置元件被固定为R注意到视口，而不是另一个元素。因此，由于视口不切断，溢出变得无关紧要。

鉴于一个元件与 位置的位置和尺寸：绝对是相对于其包含块，位置 并与位置的元素的尺寸：固定总是相 到含初始块。这通常是视口： 浏览器窗口或纸张的页面框。

REF：http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning

Answer 2

固定位置元素相对于浏览器窗口被定位，所以该父组件是基本上不相关的。

为了得到你想要的效果，其中父剪辑overflow孩子，使用position: absolute代替：http://jsfiddle.net/DBHUv/1/

Answer 3

我有一个类似的，相当复杂的问题，流动布局，其中右边一列有一个固定的宽度和左边的宽度是可变的。我的固定容器应该与柔性柱具有相同的宽度。这里是我的解决方案：

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/

Answer 4

你可以考虑使用CSS clip: rect(top, right, bottom, left);夹固定POSI给父母的元素。请参阅演示http://jsfiddle.net/lmeurs/jf3t0fmf/。

请注意，小心使用！

虽然夹子式的广泛支持，主要缺点是：

1. 父的位置不能是静态的或相对的（可以使用一个相对定位的容器内的绝对定位的亲本）;
2. 矩形坐标不支持百分比，尽管auto值等于100%，即。 clip: rect(auto, auto, auto, auto);;
3. 带子元素的可能性至少在IE11 & Chrome34中有限制，我们不能将子元素的位置设置为相对或绝对或者使用像scale这样的CSS3变换。

查看http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/了解更多信息。

编辑：镀铬似乎处理的定位和CSS3转换的子元素应用backface-visibility时好了很多，所以只是为了确保我们说：

-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
backface-visibility: hidden; 

到主子元素。

另请注意，旧版/移动浏览器尚未完全支持此功能，也可能需要额外付出一些努力。请参阅我们的实施菜单bellafuchsia.com。

1. IE8显示菜单很好，但菜单链接不可点击;
2. IE9不显示折叠下的菜单;
3. iOS Safari < 5不显示菜单;
4. iOS Safari 5+在滚动后重新滚动剪辑的内容;
5. FF（至少13+），IE10 +，Chrome和Chrome for Android似乎打得不错。

编辑2014-11-02：演示网址已更新。

Answer 5

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框模型中，转换的任何非零值都会导致创建堆栈上下文和包含blo CK。该对象充当固定位置后代的包含块。

Answer 6

如果你想隐藏的固定位置元素溢出，我发现最简单的方法是将一个容器元素中的元素，并应用position:fixed和overflow:hidden该元素所包含的元素，而不是（你必须从包含的元素中删除position:fixed才能工作）。然后应按预期裁剪固定容器的内容。

在我的情况下，我在固定位置元素上使用object-fit:cover时遇到了问题（它溢出到页面主体的边界之外，而不管overflow:hidden）。将其放在容器上的overflow:hidden固定容器内固定该问题。