position: absolute 元素不随滚动容器移动，因其定位参考最近已定位祖先（如 relative），若滚动容器未设 position: relative，则可能相对于 body 定位；解决方法是给滚动容器设 position: relative 以锁定包含块，或改用 position: sticky。
为什么 position: absolute 在滚动容器里“不跟着动”
因为 position: absolute 的定位参考点是**最近的已定位祖先元素**（即 position 值为 relative、absolute、fixed 或 sticky 的父级），而不是视口。如果滚动的是某个 div（比如设置了 overflow-y: auto），而它的父级没设 position: relative，那 absolute 元素就会往上找，最终可能相对于 body 定位——于是它在容器内“悬浮不动”，看起来像脱离了滚动流。
让图片随容器滚动的正确嵌套结构
关键不是去掉 absolute，而是**把定位上下文锁死在滚动容器内部**：
- 给滚动容器（比如
.scroll-container）显式设置position: relative - 把图片放在这个容器内部，并设
position: absolute和具体偏移（如top: 20px; left: 30px） - 确保图片不在其他更外层的定位上下文中“逃逸”
.scroll-container {
height: 400px;
overflow-y: auto;
position: relative; /* ✅ 必须加这一行 */
}
.scroll-container img {
position: absolute;
top: 20px;
left: 30px;
width: 100px;
}
常见翻车现场和绕过方案
即使加了 relative，也可能因以下原因失效：
-
transform、filter、will-change等属性会让父容器**创建新的层叠上下文 + 新的包含块**，导致absolute子元素参考它定位，但滚动行为可能异常（尤其 Safari） - 父容器用了
position: sticky且未配top，可能意外接管定位上下文 - 图片被包裹在另一个未设
position的div里，而该div又被更高层的relative捕获
排查建议：用浏览器开发者工具逐层检查「Computed → Position」，确认图片的 Containing Block 是你预期的那个容器。
立即学习“前端免费学习笔记（深入）”；
替代思路：不用 absolute，改用 position: sticky
如果目标只是“图片固定在滚动容器内的某个位置（比如右上角），随内容一起滚动到视野时才出现”，sticky 更轻量、语义更准，且天然适配容器滚动：
.scroll-container {
height: 400px;
overflow-y: auto;
/* 不需要 position: relative */
}
.scroll-container img {
position: sticky;
top: 20px;
right: 20px;
width: 80px;
}
注意：sticky 要生效，其**最近的滚动祖先必须是它的父容器本身**（不能靠祖父滚动），且父容器不能有 transform 等触发新格式化上下文的属性。
滚动容器里的定位问题，核心永远是“谁在当包含块”。很多人卡在加了 relative 还不管用，其实是因为中间混入了 transform 或多了一层没设定位的 wrapper —— 这种细节，比写对 CSS 属性还难肉眼发现。
