家长

Question

我不知道是否有问题，但我想知道为什么溢出：hidden在固定的父/子元素上不起作用。

举个例子：

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

2016年更新：

您可以创建一个新的堆叠上下文，如Coderwall上所示：

<div style="transform: translate3d(0,0,0);overflow:hidden">
   <img style="position:fixed; ..." />
</div>

指的是http://dev.w3.org/csswg/css-transforms/#transform-渲染

对于布局由CSS框模型控制的元素，转换的任何值（none除外）都会创建堆叠上下文和包含块。该对象充当固定定位子体的包含块。

Answer 2

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

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

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

Answer 3

您可以考虑使用CSS剪辑： rect（top， right， base，↓）；将固定定位的元素剪辑到父元素。请参阅http://jsfiddle.net/lmeurs/jf3t0fmf/.演示

小心使用！

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

1. 父级的位置不能是静态的或相对的（可以在相对位置的容器中使用绝对位置的父级）；
2. 矩形坐标不支持百分比，尽管auto值等于100%，即。剪辑：rect（auto， auto， auto， auto）；；
3. 至少在IE11中限制了子元素的可能性

有关更多信息，请参阅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菜单的实现。通用域名格式。

1. IE8很好地显示了菜单，但菜单链接不可点击

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