父母与孩子的位置固定，家长溢出：隐藏错误(parent & child with position

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

因为固定位置元件固定相对于所述视口，而不是另一种元素。因此由于视口被不切割它关闭时，溢出变得无关紧要。

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

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

Answer 2:

你可以考虑使用CSS clip: rect(top, right, bottom, left); 到一个固定的定位元件夹到父对象。看到演示http://jsfiddle.net/lmeurs/jf3t0fmf/ 。

当心，小心使用！

虽然剪辑风格得到广泛支持，主要缺点是：

父位置不能是静态的或相对的（可以使用一个相对定位的容器内的绝对定位的亲本）;
该矩形坐标不支持百分比，虽然auto值等于100%即。 clip: rect(auto, auto, auto, auto); ;
与子元素Possibillities至少在IE11和Chrome34，即是有限的。我们不能设置子元素相对或绝对或使用CSS3的位置变换类似规模。

见http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/获取更多信息。

编辑：看来镀铬处理的定位和CSS3申请时上子元素好多了转变背面可见性，所以只是为了确保我们说：

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

在主要子元素。

另外请注意，它不是完全由旧的/移动浏览器的支持，也可能需要一些额外的努力。请参阅我们在菜单中执行bellafuchsia.com 。

IE8显示菜单很好，但菜单链接无法点击;
IE9不显示下皱襞的菜单;
的iOS的Safari <5不显示菜单井;
iOS的Safari 5以上重绘后滚动卷轴上被剪辑内容;
FF（至少13+），IE10 +，Chrome和Android版Chrome似乎发挥好。

编辑2014年11月2日：演示网址已更新。

Answer 3:

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盒模型，比没有将其用于制作两者堆叠环境和含块的变换结果的其他任何值支配元素。对象充当固定定位后代包含块。

Answer 4:

作为替代使用夹子，你也可以使用{border-radius: 0.0001px}父元素上。它不仅与绝对值/固定定位的元素。

Answer 5:

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

在我的情况我是有使用麻烦object-fit:cover固定位置的元件上（它是溢出的页面体的边界之外，而不管overflow:hidden ）。将它与一个固定的容器内overflow:hidden在容器上固定的问题。

Answer 6:

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

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/