位置固定的父母和孩子,父母溢出:隐藏的bug

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/上的演示.

当心,小心使用!

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

1. 父级的位置不能是静态的或相对的(可以在相对定位的容器内使用绝对定位的父级);
2. rect坐标不支持百分比,但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/.

编辑:在应用背面可见性时,Chrome似乎可以更好地处理子元素的定位和CSS3变换,所以为了确保我们添加:

-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:演示URL已更新.

Answer 2

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

虽然具有position:absolute的元素的位置和尺寸是相对于其包含块的,但是position:fixed的元素的位置和尺寸始终相对于初始包含块.这通常是视口:浏览器窗口或纸张的页面框.

参考: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

在父元素上添加clip-path: inset(0 0 0 0);

Answer 5

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