使固定元素服从溢出：隐藏答案

【问题标题】：Make fixed element obey overflow:hidden使固定元素服从溢出：隐藏
【发布时间】：2012-11-16 10:00:16
【问题描述】：

真的不敢相信我不能解决这个问题！

如何让固定元素服从overflow 设置？

在小提琴和上图中，您将看到一个包含三个divs 的div，每个都有不同的position 设置。 relative 元素服从溢出。现在我希望并且可以接受absolute 元素爆发，但我需要固定元素服从overflow 这可能吗？

如果需要，很乐意使用 jQuery。

【问题讨论】：

fiddle 好像不完整，部分用到的类不见了
排序@MichalKlouda 谢谢
我不明白.. 这是根据 w3schools css 定位的预期行为：w3schools.com/css/css_positioning.asp。没关系，它只适用于position: relative。
是的，我同意这是预期的行为。只是想知道是否有人有任何肮脏的修复。我想我可能已经找到了我之后的肮脏修复
这里有你的问题的解释stackoverflow.com/questions/12463658/…希望对你有帮助

【解决方案1】：

固定和绝对定位的元素被从正常的文档流中取出，这意味着原始父容器的边框不再对元素产生影响。

【讨论】：

有点不正确，一个绝对定位的元素可以被它的父元素剪裁，如果父元素是relative——但是一个固定元素在任何情况下都不能被约束.
所以@derrylwc，有什么明智的方法可以让相对容器中的绝对定位元素表现得好像它是固定的一样？
如果父元素是视口的 100% 宽度/高度，那么从技术上讲，absolute 子元素的行为就像它是固定的一样。但出于所有密集目的，您必须从父级中删除relative，或者如果您想相对于视口定位元素，则只需使用fixed。

【解决方案2】：

要修复绝对定位的 div，在容器中创建一个新的位置上下文：

#wrap {height:100px; width:100px; border:20px solid red; overflow:hidden;position:relative;}

固定位置的 div 完全脱离了流程（并且可能在容器框之外），因此这是不可能的。为了演示，把 fiddle 窗口做得很小，垂直滚动窗口，观察固定的 div 在容器外移动。

【讨论】：