固定位置 div 在 pos:relative & overflow-y:scroll

Question

我想在一个带有overflow-y:scroll的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 -->

Answer 1

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

正如您在示例中所做的那样，将position:relative 应用于父.foo，然后将position:absolute 应用于子.bar。通常，这将达到将.bar 捕捉到父级顶部的预期结果，但是由于父级div 中的子级内容溢出，并且overflow-y:scroll 滚动all 子级内容，.bar 也必须滚动。请参阅my Fiddle here 中的顶级示例。

要解决此问题，请将您要滚动的内容包装在另一个容器中并启用overflow-y:scroll，并在.foo 上删除overflow-y:scroll，以防止.bar 滚动。

要查看您可以修改的工作示例，请参阅my Fiddle here 中的底部示例。

Answer 2

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

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>

在这里，我为你创建了一个fiddle。