用 position: absolute 配合 z-index 可使图片浮于文字上层，需设最近 relative 祖先、显式 z-index 值及宽高；float 仅实现文字环绕，不控制层叠。
用 position: absolute 让图片浮在文字上层
图像“浮”在文字上，本质是脱离文档流、叠加到已有内容之上。最直接可靠的方式就是用 position: absolute 配合 z-index，而不是依赖 float（它只影响文字环绕，不控制层叠）。
关键点：
-
absolute的定位基准是最近的position: relative祖先元素；没设的话就按视口定位，容易跑偏 - 必须显式设置
z-index值（比如z-index: 10），否则默认堆叠顺序可能不如预期 - 图片本身需设宽高或
max-width: 100%，避免撑破容器
这是一段正文文字，会正常流动。
@@##@@
z-index 不生效？检查父容器的定位上下文
常见现象：加了 z-index 没反应，图片还是被文字盖住。大概率是因为父级没设 position: relative，导致 absolute 元素向上找定位上下文时跳到了 或某个意外容器，而那个容器本身没有 z-index 约束能力。
立即学习“前端免费学习笔记（深入）”；
排查步骤：
- 用浏览器开发者工具选中图片，看 “Computed” 面板里
position和z-index是否生效 - 逐级往上查父元素，确认哪个是最近的
position: relative/absolute/fixed - 如果父容器是
position: static（默认值），它不构成定位上下文，z-index在它内部无效
想让图片随文字流局部浮动？慎用 float
float 不能让图片“浮在上层”，只能让它左/右偏移，文字环绕它——这是 CSS1 就有的布局方式，和层叠无关。如果你看到“图片浮在文字上”的错觉，其实是文字缩进、行高或外边距造成的视觉误差。
真实限制：
-
float元素仍属于文档流（只是形状被绕开），无法用z-index控制层级 - 现代排版中，
float已基本被flex或grid替代，仅用于兼容老项目或简单图文混排 - 若坚持用
float实现类似效果，必须配合margin调整间距，并接受文字环绕逻辑不可控
响应式场景下图片上浮容易错位
用 absolute 定位后，top/right 等值是固定像素或百分比，在屏幕变小、字体缩放、容器重排时极易脱离原位置。
更稳健的做法：
- 优先用
transform: translate()微调位置（不影响文档流，且支持 GPU 加速） - 把定位值换成
em或rem，跟随字体变化缩放 - 对关键断点加媒体查询，重置
top/right值，例如：@media (max-width: 768px) { img { top: 5px; right: 5px; } }
真正难的不是让图“浮起来”，而是让它在各种尺寸、缩放、读屏器环境下依然可访问、不遮挡关键文本、不破坏语义结构。
