Question

我希望div中有一个固定位置的div，溢出-y：滚动，这意味着我希望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滚动全部子内容，.bar也必须滚动。请参阅my Fiddle here中的顶部示例。

要解决此问题，请将要在overflow-y:scroll打开的其他容器中滚动的内容包装好，然后移除overflow-y:scroll上的.foo以阻止.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。

固定位置div在pos：relative＆amp;溢出-Y：滚动

2 个答案: