必须给图片容器加 position: relative，否则 absolute 水印会相对于 body 定位而飘出图片；因 img 默认 static，不构成定位上下文，需外层 div 显式创建定位上下文，并配合百分比坐标与 transform 居中确保响应式精准钉位。
为什么必须给图片容器加 position: relative
不加这句，position: absolute 的水印会直接相对于 body 定位——图片一缩放，水印就飘到页面左上角或右下角外，完全脱离控制。根本原因是：absolute 元素只认「最近的已定位祖先」，而 <img> 默认是 static，不构成定位上下文。
常见错误写法：.watermark { position: absolute; bottom: 5%; right: 5%; } 单独存在，没包裹容器，等于裸奔。
正确做法是用一个 <div class="img-container"> 包住图片和水印，并在 CSS 中明确写：.img-container { position: relative; }。这个容器还得是块级、有宽高（比如继承图片的 max-width: 100%），否则可能塌陷导致定位基准错乱。
top/left 用百分比而不是像素值
固定像素（如 top: 20px）在响应式场景下必然失效：小屏时水印压文字，大屏时离图片边缘太远。百分比值随容器尺寸等比缩放，才能保持相对位置稳定。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 按原始图片分辨率计算坐标：比如原图 1200×800，想标在 (300, 200)，对应就是
top: 25%; left: 25%; - 优先用
top和left，不用bottom/right——后者依赖容器宽度，而响应式容器宽常变，但图片宽高比更稳定 - 避免混用单位：比如
top: 10%; left: 20px，缩放时会错位加剧
如何让水印文字真正“钉”在目标点上
只写 top: 25%; left: 25%，水印的左上角会落在那个点，但通常你想要的是文字中心对齐——尤其当水印是带背景的 badge 或旋转文字时。
解决办法是补一句 transform: translate(-50%, -50%)：
.watermark {
position: absolute;
top: 25%;
left: 25%;
transform: translate(-50%, -50%);
}
注意：这要求水印元素有明确宽高（或至少 min-width/min-height），否则 translate 可能无效；如果水印是纯文字且无背景，也建议加 white-space: nowrap 防止换行破坏居中。
容易被忽略的兼容性与渲染细节
某些浏览器对 <img> 直接设 position: relative 行为不一致，甚至触发重绘异常，所以别偷懒——必须用外层 <div> 承载 relative。
如果用了 object-fit: cover 或 background-image 方案，标注坐标仍得按原始图片宽高比计算，不是渲染后可视区域尺寸。这点在 mockup 图或封面图场景特别容易翻车。
最后提醒：水印若含小字号或旋转，加上 transform: translate(0, 0)（或任何不影响视觉的 transform）可强制 GPU 加速，减少模糊——这不是锦上添花，而是移动端真实存在的渲染问题。
