Css 家长及；位置固定的子项，父项溢出：隐藏错误

我不知道是否存在问题，但我想知道为什么

溢出：隐藏

在

固定

父/子元素上不起作用

下面是一个例子：

CSS和HTML:

.parent{
位置：固定；
溢出：隐藏；
宽度：300px；
高度：300px；
背景:#555；
}
.儿童{
位置：固定；
顶部：200px；
左：200px；
宽度：150px；
高度：150像素；
背景：#333；
}

---

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

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

---

ref:

固定位置元素相对于浏览器窗口定位，因此父元素基本上是不相关的

---

要获得您想要的效果，如果父列上的

溢出

剪辑子列，请使用

位置：绝对

：

我有一个类似的非常复杂的流体布局问题，右列的宽度固定，左列的宽度灵活。我的固定容器的宽度应与柔性柱的宽度相同。以下是我的解决方案：

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 <代码>剪辑：ReCt（顶部、右侧、底部、左侧）；<代码>将固定定位的图元剪裁到父图元。见演示在

小心使用

尽管剪辑样式得到广泛支持，但其主要缺点是：

父对象的位置不能是静态的或相对的（可以在相对定位的容器中使用绝对定位的父对象）

rect坐标不支持百分比，尽管

auto

值等于

100%

，即

clip:rect（auto，auto，auto）
子元素的可能性至少在IE11和Chrome34中受到限制，即，我们不能将子元素的位置设置为相对或绝对，也不能使用CSS3变换之类的比例
有关更多信息，请参阅

编辑：应用Chrome时，它似乎可以更好地处理子元素上的定位和CSS3转换，因此我们添加了：

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

到主子元素

还要注意的是，旧的/移动浏览器并不完全支持它，或者可能需要一些额外的工作。有关菜单，请参见我们的实现

IE8很好地显示了菜单，但菜单链接不可点击
IE9不显示折叠下的菜单
iOS Safari2016更新：

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



指的是

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

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

在我的例子中，我在固定位置元素上使用时遇到了问题（它溢出到页面正文的边界之外，而与
溢出：隐藏
）无关）。将其放置在容器上带有
溢出：隐藏
的固定容器中修复了问题。
作为使用clip的替代方法，您也可以使用
{border radius:0.0001px}
在父元素上。它不仅适用于绝对/固定定位元素。
brilliand解决方案，干杯！
iOS Safari 5+在滚动后重新绘制滚动上的剪辑内容；
iOS 8 Safari（即使在更新之后）似乎仍然是这样。
矩形坐标不支持百分比
，但我们可以为.parent提供所需的百分比维度。这改变了生活！非常感谢您的技术！@Imeurs伟大的解决方案。一个警告是。接下来我们应该使用
剪辑路径
属性。除了
剪辑：rect（auto，auto，auto，auto）；
，我们还应该包括
剪辑路径：inset（0）
@Imeurs-Brilliant！！@Chris
clip
可能不受欢迎，但IE11或Edge仍然不支持
clip path
。我现在将使用
clip
。它在Edge中工作，但在Internet Explorer 11中不工作。仍然存在一个问题-transform属性引入了一个新的本地坐标系。因此，如果我想使用它的话y img相对于viewport是固定的，现在它相对于这个溢出容器元素是固定的。但是，子元素的
位置：fixed；
没有按照预期工作。jsfiddle链接中断，因为这只是因为链接而被否决了？答案很简单，并且按照预期工作。但是在firefox中不工作。我会喜欢这个，much比在javascript中重新定位所有垃圾更可靠。
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

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