Question

我遇到了这个问题，试图在应用程序中实现https://github.com/jmosbech/StickyTableHeaders。在我的情况下，一切正常，但标题在容器外可见。一旦它有位置：固定，它突然忽略了z-index和溢出属性。我设置了以下小提琴来演示这个问题：

.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

的好文章

如何防止位置：固定元素与其父元素重叠

1 个答案: