使固定元素遵守overflow:hidden

Question

实际上我不能相信我解决不了这个问题！

如何使固定元素遵守 overflow 设置？

我已经创建了一个JSFiddle - http://jsfiddle.net/REk4C/7/

在JSFiddle和上面的图片中，您将看到一个包含三个 div 元素的 div，每个都有不同的 position 设置。 relative 元素遵守 overflow。现在我期望并可以接受 absolute 元素突破限制，但我需要固定的元素也遵守 overflow，这种情况可行吗？

如果需要，可以使用 jQuery。

- Alex

---

JSFiddle似乎不完整，一些使用的类别缺失。 - Michal Klouda

我不明白。根据w3schools的CSS定位（http://www.w3schools.com/css/css_positioning.asp），这是预期的行为。它只能与“position：relative”一起使用也是可以接受的。 - Diego

我同意这是预期行为。只是想知道是否有任何“肮脏”的解决方法。我认为我可能已经找到了我需要的“肮脏”解决方法。 - Alex

这里有一个解释你的问题的链接：https://dev59.com/y2cs5IYBdhLWcg3w8oXK 希望能帮到你。 - wandarkaf

如果您的子div位于一个固定定位的div内部，为什么要将其位置指定为fixed？您想要实现什么效果？ - Diego

Answer 1

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

- Sven Bieder

---

稍有出入，绝对定位的元素 可以 被其父元素裁剪，前提是父元素为 relative – 然而，一个固定定位的元素在任何情况下都无法被限制。 - derrylwc

@derrylwc，有没有什么明智的方法可以让相对容器内的绝对定位元素表现得像固定定位一样？ - Dom Vinyard

如果父元素是视口的100％宽度/高度，则从技术上讲，“absolute”子元素的行为就像是固定的。但是，出于所有强制性目的，您必须从父级中删除“relative”，或者如果您想相对于视口定位元素，则只需使用“fixed”。 - derrylwc

Answer 2

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

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

固定定位的 div 完全脱离了文档流（并有可能超出容器盒子），因此无法实现。为了演示，可以将 fiddle 窗口缩小，并垂直滚动窗口，观察固定的 div 是否移动到容器外部。

- sphair

---

你的目标似乎非常不清晰！你真正想通过固定定位的div实现什么？ - sphair