图片“跟随文字滚动”实为两类需求：一是用position: fixed实现悬浮效果，需显式设置定位和z-index；二是用float实现文字环绕混排，需设width、margin并清除浮动。
图片“跟随文字滚动”这个说法本身有歧义——如果是指图片始终固定在视口某处（比如右下角客服图标），那它其实**不跟随文字，而是脱离文档流、相对于视口定位**；如果是指图片嵌在段落中、随文字自然流动（即图文混排），那它根本不需要“跟随”，本来就在流里。真正要解决的，是这两类常见误判场景。
用 position: fixed 实现“悬浮式跟随”（非真跟随）
所谓“图片跟随滚动”，90% 实际是要做悬浮效果：比如右下角按钮、侧边导航图标、返回顶部箭头。这类必须用 position: fixed，不是 sticky，也不是 absolute。
-
top/right/bottom/left必须显式设置，否则默认堆在视口左上角 - 加
z-index，否则容易被其他内容（如 modal、header）遮挡 - 移动端 Safari 对
fixed支持不稳定，地址栏收放时可能跳动；可加will-change: transform或降级为 JS +transform: translate()模拟（但别在 scroll 里直接改top/left） - 别给
fixed图片设width: 100%且无max-width，小屏会横向溢出
用 float 实现“文字环绕图片”（真·混排）
这才是图片“随文字滚动”的本意：图片作为段落一部分，文字从其左右/上下自然绕流。这是唯一能响应文字流变化的方案，也是长文插图的标准做法。
- 图片必须是行内级元素（
<img>默认就是），不能被父容器用display: block或flex切断上下文 - 必须设明确
width（如width: 200px），否则浮动可能失效或撑满容器 - 加
margin留呼吸空间，比如float: left; margin-right: 16px; - 父容器需清除浮动，最简方式是加
overflow: hidden；若后续内容要恢复流，也可用伪元素::after { content: ""; clear: both; display: table; } - 别在 Flex/Grid 容器里用
float——它基本失效，此时应改用align-self+margin模拟位置
为什么 position: sticky 不适合“跟随文字”
sticky 是条件性粘滞：只在滚动到某个临界点时才“粘住”，一旦父容器滚出视口，图片就消失。它不能跨区域长期存在，也不响应文字流位置变化。
立即学习“前端免费学习笔记（深入）”；
- 仅设
position: sticky无效，必须配合top或bottom - 父容器不能有
overflow: hidden、auto或scroll，否则粘性行为被截断 - 典型误用：给一个
height: 100vh的 div 设sticky，结果图片只在该容器内“粘”，容器一滚走，图片就没了 - 它适用于表格表头、导航栏，不适用于图文混排或悬浮图标
需要滚动中动态控制？先问值不值得用 JS
比如“滚动到某区域才显示图片”或“随滚动距离缩放”，确实要用 JS，但代价很高：
- 优先用
IntersectionObserver替代scroll+getBoundingClientRect()判断是否进入视口 - 动画类操作（位移、缩放、透明度）必须用
transform和opacity，避免触发重排（top/left/width都不行） - 别在滚动中直接改
img.src或增删class控制显隐，极易造成 layout thrashing - 绝大多数所谓“跟随”需求，其实用
fixed或float就够了；加 JS 反而引入性能风险和兼容负担
最容易被忽略的是布局上下文的破坏：一张图放进 flex 容器后，再想让它被文字环绕，已经不可能了——它和文字不再处于同一行内流中。这时候得回头检查 HTML 结构，而不是硬调 CSS。
