CSS
关于绝对定位，并随滚动条移动的问题
墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网
我也要 关注 + 加入社区想实现的效果是，一个跟随父容器的span，使用position:absolute或fixed后，当父容器随着页面滚动条移动时，该span随父容器一起移动。
父容器未使用定位。
<div style="height:500px;width:270px;overflow:scroll;" id="AAA">
<p style="margin:10px;height:20px;">
<span style="position:fixed;width:100px;height:30px;margin-top:-5px;background-image:url(1.png);"></span>
</p>
<p style="margin:10px;height:20px;">
<span style="position:fixed;width:100px;height:30px;margin-top:-5px;background-image:url(1.png);"></span>
</p>
</div>
因为有一个100*30的背景图，想放在p里面，但是p的高度只有20，所以想了这个办法。
实际上当AAA里的P多了出滚动条后，拖动滚动条时，SPAN不动。
请问大神们如何解？
父容器未使用定位。
<div style="height:500px;width:270px;overflow:scroll;" id="AAA">
<p style="margin:10px;height:20px;">
<span style="position:fixed;width:100px;height:30px;margin-top:-5px;background-image:url(1.png);"></span>
</p>
<p style="margin:10px;height:20px;">
<span style="position:fixed;width:100px;height:30px;margin-top:-5px;background-image:url(1.png);"></span>
</p>
</div>
因为有一个100*30的背景图，想放在p里面，但是p的高度只有20，所以想了这个办法。
实际上当AAA里的P多了出滚动条后，拖动滚动条时，SPAN不动。
请问大神们如何解？
...全文
相关推荐
Jquery跟随滚动条移动的div动画效果
Jquery跟随滚动条移动的div动画效果"就是一个典型的例子，它利用jQuery库实现了一个div元素随着页面滚动条移动而同步移动的特效，而且这个div在移动过程中保持平滑，避免了闪烁现象，提升了用户体验
javascript实现滚动条效果
当鼠标按下在滚动条上时，我们记录当前的鼠标位置（prevY）。在鼠标移动过程中，根据鼠标位置的变化更新 scrollTop 并同步滚动条位置。最后，当鼠标释放时，清除 prevY 值。
绝对定位固定方法[项目源码]
这种方法的好处是可以在父容器内保持元素的相对位置，同时整体父容器不随滚动条移动，保持固定。这为布局设计提供了更多的灵活性。
自定义滚动条
- 滚动条子元素使用`position: absolute`进行了绝对定位，以便精确控制其在容器中的位置。 - 滚动条滑块使用了背景色来模拟滚动效果。3.
JavaScript添加随滚动条滚动窗体的方法
第二种实现方式则是通过创建绝对定位的`div`元素，并在滚动事件触发时调整其位置。
