图片定位应使用 position: relative 的父容器包裹 img，文字层用 absolute 定位；img 保持 static；响应式时父容器需设宽高或 aspect-ratio；top/left 依是否随图缩放选 % 或 px；z-index 失效多因层叠上下文不一致。
图片定位用 position: relative 而不是 absolute 包裹父容器
图片上加文字标注，最常踩的坑是直接给 <img alt="CSS定位在图片标注中的应用_在图片特定位置叠加文字" > 加 position: absolute —— 这会让图片脱离文档流，后续布局全乱，而且文字根本对不齐。正确做法是把图片包进一个 position: relative 的容器里，文字层用 absolute 相对于它定位。
- 父容器必须设
position: relative（或absolute/fixed），否则子元素的absolute会往上找最近的定位祖先，经常跑到 body 顶上去 -
<img alt="CSS定位在图片标注中的应用_在图片特定位置叠加文字" >本身不需要设position，保持默认static即可 - 如果图片是响应式的（比如
width: 100%），父容器要同步设宽高或aspect-ratio，否则absolute文字的百分比定位会失准
top/left 用百分比还是 px？看标注是否随图缩放
标注位置要不要跟着图片一起缩放，决定了单位选法。固定像素值适合图标、按钮这类精确控件；百分比适合地图、截图、流程图这类需要保持相对位置的场景。
- 用
%：文字始终在图片右下角 5% 处，图片从 400px 缩到 200px，文字也跟着往里缩 - 用
px：文字永远离右边界 10px，图片变小后可能被裁掉，或飘到图外 - 混合用更灵活：比如
top: 10px; left: 5%，垂直偏移固定，水平随图缩放
文字遮挡图片时，z-index 不生效？检查是否漏了定位上下文
写了 z-index: 10 还是被图片盖住，大概率是因为文字和图片不在同一个“层叠上下文”里。CSS 的 z-index 只在同级定位元素间比较，不是全局排序。
- 确保文字和图片的父容器是同一个
position: relative元素 - 避免在文字层或图片上额外加
transform、opacity 、<code>will-change—— 这些都会创建新的层叠上下文，让z-index重新计数 - 调试时临时加
outline: 1px solid red看文字层是否真在图片上方，排除透明度/颜色导致的“看不见”假象
响应式图片标注中，background-image 比 <img alt="CSS定位在图片标注中的应用_在图片特定位置叠加文字" > 更可控
当图片来自 CSS（比如 background-image），标注反而更容易对齐，因为背景图的位置、缩放、裁剪都由 CSS 统一控制，不会像 <img alt="CSS定位在图片标注中的应用_在图片特定位置叠加文字" > 那样受 object-fit 和 intrinsic size 干扰。
立即学习“前端免费学习笔记（深入）”；
- 用
background-size: contain+background-position控制图显区域，再用绝对定位文字匹配背景坐标 - 缺点是无法语义化、SEO 不友好、不能右键保存，纯展示场景可用
- 如果必须用
<img alt="CSS定位在图片标注中的应用_在图片特定位置叠加文字" >，优先用object-fit: cover并配合object-position微调显示区域，再算标注偏移
真正麻烦的是多尺寸适配时，同一组 top/left 值在手机和桌面端表现差异大——这时候得用媒体查询分段写，或者改用 JS 动态计算，但后者容易引入渲染延迟。定位本身不难，难的是“图变，标注还得准”。
