14

我希望在具有溢出-y：滚动的 div 内有一个固定位置的 div，这意味着我希望 div 在其余内容正常滚动时保持原位。而且我不知道出了什么问题，有人可以帮忙吗？提前致谢...

.foo {
    position:relative;
    display:block;
    width:100%;
    height:300px;
    overflow-y:scroll;
}
.bar {
    position:fixed;
    top:0;
    right:0;
}

这是HTML

<div class="foo">
    <div class="bar"><div><!-- end of div that should be fixed -->
    <div class="someOther">...</div>
    <div class="someOther">...</div>
    <div class="someOther">...</div>
    <div class="someOther">...</div>
</div><!-- end of container -->
4

2 回答 2

23

当你应用position:fixed到一个元素时，你是在相对于窗口本身而不是它的父元素来定位它。您将希望使用position:absolute相对于其父级定位子级，只要父级具有除position:static默认位置之外的位置。

正如您在示例中正确所做的那样，先应用于position:relativeparent .foo，然后再应用于position:absolutechild .bar。通常，这将实现将 捕捉.bar到父级顶部的预期结果，但是由于父级 div 中的子级内容溢出，并且overflow-y:scroll滚动所有子级内容，.bar因此也必须滚动。请在此处查看我的 Fiddle中的顶级示例。

要解决此问题，请将要滚动的内容包装在另一个容器中并使用overflow-y:scrollon 和 remove overflow-y:scrollon.foo以防止.bar滚动。

要查看您可以调整的工作示例，请参阅我的 Fiddle here中的底部示例。

于 2013-04-26T23:49:13.737 回答
5

固定元素的位置是相对于您正在查看的整个文档的，而不是相对于父元素的位置。如果你想让它工作，你需要这样的东西：

CSS

.foo {
    height : 300px;
    position : relative;
    width : 100%;
}
.bar {
    border-bottom : 1px solid #000;
    height : 50px;
}
.scollable_content {
    height : 250px;
    overflow-y : auto;
}

HTML

<div class="foo">
    <div class="bar"></div>
    <div class="scrollable_content">
        <div class="someOther">...</div>
        <div class="someOther">...</div>
        <div class="someOther">...</div>
        <div class="someOther">...</div>
    </div>
</div>

在这里，我为你创造了一个小提琴。

于 2013-04-26T16:31:35.377 回答