相对定位容器内固定位置的div，且容器设置了纵向滚动

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 -->

- user2324537

---

一个固定元素的位置是相对于整个页面而非其父元素的。 - Unexpected Pair of Colons

Answer 1

当你给一个元素应用position:fixed时，你是将它相对于窗口本身进行定位，而不是它的父元素。你需要使用position:absolute来将子元素相对于其父元素定位，只要父元素具有除了默认位置position:static以外的定位。

正如你在示例中所做的那样，将.foo父元素应用position:relative，然后将.bar子元素应用position:absolute。通常，这会实现将.bar捆绑到父元素顶部的期望结果，但由于父

中有子元素内容溢出，并且 overflow-y:scroll 滚动所有 子元素内容，.bar也必须滚动。请参见此处的我的Fiddle 中的顶部示例。

为了解决这个问题，用另一个带有overflow-y:scroll 的容器包装您想要滚动的内容，并删除.foo上的overflow-y:scroll，以防止.bar滚动。

要查看您可以适应的工作示例，请参见此处的我的Fiddle 中的底部示例。

- Jay Bee Why

---

当有滚动条时，如何使顶部的栏不覆盖滚动条？ - Barry McNamara

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>

这里，我为您创建了一个示例代码。

- Unexpected Pair of Colons

---

谢谢回复，但问题是我需要在同一层次/深度上拥有“.bar”和“scrollable_content”（因为有几个z-index操作）。 - user2324537

那么你将不得不使用Javascript来控制它。否则，您可以操纵您的HTML和CSS来实现您需要的功能，这可能更容易。 - Unexpected Pair of Colons