固定元素在容器元素内的位置

Question

我有一个父div，如果页面向下滚动，我想让子div保持固定状态。

我尝试将position:relative;用于父元素，并使用position:fixed;作为子元素，但它不起作用，因为子div根据窗口对象而不是父div定位。

使用CSS实现此目的有什么解决方法吗？如果没有，一些javascript / Jquery技巧来创建这个？

欢迎任何提示/建议！

谢谢！

Answer 1

对父级使用position:relative;，为子级使用position:absolute;。

例如：

CSS：

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    left: 0;
}

HTML：

<div class="parent">
    <div class="child">
    </div>
</div>

Answer 2

Jquery.pin可能会帮到你，我想

这是一个JQuery插件，该功能是提供一个“粘性元素，在您向下滚动时静静地挂起”

Answer 3

position:fixed始终相对于窗口视口

您可以将子项设置为绝对位置，并将其顶部和左侧位置设置为固定值。