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

您可以考虑使用CSS clip: rect(top, right, bottom, left);将固定定位元素剪切为父元素。请参阅http://jsfiddle.net/lmeurs/jf3t0fmf/上的演示。

小心，小心使用！

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

父母的位置不能是静态的或相对的（可以在相对定位的容器内使用绝对定位的父级）;
矩形坐标不支持百分比，但auto值等于100%，即。{ clip: rect(auto, auto, auto, auto);;
儿童元素的可能性至少限制在IE11＆amp; Chrome34，即。我们不能将子元素的位置设置为相对或绝对，或者使用像scale这样的CSS3变换。

有关详细信息，请参阅http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/。

backface-visibility

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

到主子元素。

另请注意，旧版/移动浏览器并未完全支持它，否则可能需要额外的努力。请参阅bellafuchsia.com上的菜单实施。

IE8显示菜单，但菜单链接不可点击;
IE9不显示折叠下的菜单;
iOS Safari＆lt; 5不能很好地显示菜单;
iOS Safari 5+在滚动后重新绘制滚动时剪辑的内容;
FF（至少13+），IE10 +，Chrome和Chrome for Android似乎都很不错。

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

Answer 2

因为固定位置元素相对于视口是固定的，而不是另一个元素。因此，由于视口没有将其切断，溢出变得无关紧要。

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

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

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框模型控制的元素，转换的除none之外的任何值都会导致创建堆叠上下文和包含块。该对象充当固定位置后代的包含块。

Answer 4

作为使用剪辑的替代方法，您还可以在父元素上使用{border-radius: 0.0001px}。它不仅适用于绝对/固定定位元素。

Answer 5

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

在我的情况下，我在固定位置元素上使用TextBox with validation loses ErrorTemplate on tab change时遇到了问题（无论overflow:hidden如何，它都溢出到页面主体的边界之外）。将它放在容器上带有{{1}}的固定容器内可以解决问题。

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/

Answer 7

固定位置元素相对于浏览器窗口定位，因此父元素基本上无关紧要。

要获得您想要的效果，父亲的overflow剪辑儿童，请改为使用position: absolute：http://jsfiddle.net/DBHUv/1/

父母与父母位置固定的孩子，父母溢出：隐藏的bug

7 个答案: