css - 我怎样才能防止位置 :fixed elements from overlapping their parent

Question

我在尝试实现 https://github.com/jmosbech/StickyTableHeaders 时遇到了这个问题在应用程序中。就我而言，一切正常，但 header 在容器外部可见。一旦它有了 position:fixed，它就会突然忽略 z-index 和 overflow 属性。我设置了以下 fiddle 来演示这个问题:

.scroller{
    overflow:scroll;
    width:200px;
    margin:2em auto;
}

.container{
    width:400px;
    background:green;
    overflow:hidden;
}

.foobar {
    width:350px;
    height:10px;
    position:fixed;
    background:yellow;
    opacity:0.5;
    margin-left:-25px;
}

http://jsfiddle.net/z2x5Q/1/

如何保持 .foobar div 的宽度和固定位置，而不与 div.container 的边界重叠？

Answer 1

为什么要尝试使用 position: fixed？

你说的问题是固定岗位的标准行为。该元素被移出 DOM 流，您需要明确说明您想要它的位置和方式。我不确定 position: fixed 是否为您提供了您想要的任何内容。事实上，一旦您从 .foobar 元素中删除该属性，看起来您就获得了想要的行为。

我建议多阅读一些关于固定位置的内容。

这里的好文章来自 CSS Tricks