文字飘到页面左上角是因为absolute元素向上查找最近已定位祖先时，因外层未设position:relative，最终以body为参考系；必须用position:relative的父容器包裹图文，且避免直接给img设定位。
为什么文字总飘到页面左上角？
因为 position: absolute 的元素会向上查找「最近的已定位祖先」作为定位参考，而 <img> 默认是 position: static，不算已定位——如果外层没设 position: relative，浏览器就一路找到 <body>，文字自然钉在视口左上角。
必须用一个 <div class="img-wrap"> 同时包裹 <img> 和文字元素，并给它显式设置 position: relative；别给 <img> 本身加定位，它是替换元素，某些浏览器下不触发可靠包含块行为。
常见错误现象包括：文字随滚动错位、点击区域失效、右键保存图片时文字消失（说明根本没叠在图上）。
top/left 用百分比还是 px？
取决于标注是否需要随图片缩放保持相对位置：
立即学习“前端免费学习笔记（深入）”；
- 用
%：适合地图、截图、流程图等，top: 15%; left: 80%始终表示“距顶部 15%、距左侧 80%”，图片缩放后文字仍卡在相同视觉位置 - 用
px：适合固定尺寸图标、按钮角标，bottom: 4px; right: 4px表示“离右下角永远 4px”，但图片变小后可能被裁掉 - 混合用更灵活：
top: 8px; left: 25%可让垂直偏移固定、水平随图缩放
响应式场景下，纯 px 容易在手机端溢出，% 则需确保父容器有明确宽高或 aspect-ratio，否则计算基准失准。
z-index 不生效，文字被图片盖住？
大概率是层叠上下文断了——z-index 只在同级定位元素间比较，不是全局排序。以下操作会意外创建新层叠上下文，导致文字的 z-index: 999 只在它自己的小圈子里有效：
-
opacity: 0.99或更低（哪怕只是 0.99） -
transform（哪怕只是translateZ(0)） will-change: transform
调试时先临时加 outline: 1px solid red 看文字是否真在图片上方，排除颜色/透明度导致的“看不见”假象；再检查图文共用的直接父容器是否被框架类（如 Bootstrap 的 col-*）覆盖了 position 值。
图片加载前文字定位错乱？
这是最隐蔽也最难排查的问题：异步加载的 <img> 初始宽高为 0，父容器塌陷，position: absolute 的文字失去定位基准，坐标原点漂移——等图片加载完成，文字才突然跳到正确位置。
解决方法很简单但常被忽略：
- 给
<img>加width和height属性（哪怕只是占位值），或用 CSS 设置aspect-ratio - 父容器加
display: inline-block或显式min-height - 避免仅靠
max-width: 100%+height: auto，它依赖图片 intrinsic size，加载前不可靠
真正容易被忽略的是：这个错位发生在 DOM 渲染初期，开发者工具里看不出异常，只能靠肉眼观察或监听 load 事件对比前后位置。
