我不知道是否有一个问题,但我想知道为什么overflow: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
解决方法
因为固定位置元素相对于视口是固定的,而不是另一个元素。因此,由于视口没有切断,溢出变得不相关。
Whereas the position and dimensions of an element with
position:absolute are relative to its containing block,the position
and dimensions of an element with position:fixed are always relative
to the initial containing block. This is normally the viewport: the
browser window or the paper’s page Box.
ref:http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning