文字水印需用position: absolute定位+rgba()背景色，锚点为最近已定位祖先；若外层未设position: relative，水印将相对body定位而“飞出”；须用relative容器包裹图片与文字，并用transform居中、clamp调字体、百分比控坐标，避免opacity导致发虚。
文字水印必须压在图片上且自身文字清晰可读，核心是用 position: absolute 定位 + background-color: rgba() 做背景，而不是给整个文字容器加 opacity。
为什么文字水印总“飞”出图片区域？
因为 position: absolute 的定位锚点是「最近的已定位祖先」。如果图片外层没设 position: relative，水印就会往上找，最终相对于 <body> 定位——看起来就像飘在页面左上角或完全不见。
- 必须用一个
<div class="img-wrapper">包住<img>和水印文字，再给这个div加position: relative - 别直接给
<img>加position: relative—— 它是替换元素，某些浏览器下不触发可靠包含块行为 - 如果用了
<picture>或框架栅格类（如 Bootstrap 的col-），要确认其直接父容器是否被意外覆盖了定位属性
水印文字怎么居中又不失真？
用 top: 50%; left: 50%; transform: translate(-50%, -50%) 是最稳的居中方式，它不依赖字体大小、行高或容器固定尺寸，响应式缩放时也不会偏移。
- 避免用
margin-top: -1em或padding模拟居中——图片宽高变化后立刻错位 - 水印文字本身加
background-color: rgba(0, 0, 0, 0.6)，不是opacity: 0.6；前者只透背景，后者会让文字发虚、图标变淡 - 若需旋转水印（如 -45°），在
transform里叠加：transform: translate(-50%, -50%) rotate(-45deg)，顺序不能反
小屏下水印被截断或撑破怎么办？
绝对定位默认按像素计算，固定 top: 20px 在手机上容易把文字推出图片边界，或让长文本换行溢出。
立即学习“前端免费学习笔记（深入）”；
- 用百分比坐标替代像素值：
top: 10%; left: 10%，配合max-width: 80%控制宽度 - 加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis防止多字水印撑开容器 - 文字尺寸用
clamp(0.75rem, 2.5vw, 1.125rem)，兼顾小屏可读与大图不糊 - 如果水印内容动态生成（如用户昵称），JS 动态注入时记得等图片加载完成后再计算位置，否则
naturalWidth可能为 0
z-index 不生效、水印被盖住的常见原因
z-index 不是万能开关，它只在「已定位元素」且「同层叠上下文内」才起作用。水印被盖住，大概率是层叠上下文断开了。
- 确保水印的直接父容器（即那个
position: relative的 wrapper）没有同时带transform、opacity < 1或will-change—— 这些会创建新层叠上下文，把水印“关”进去 - 水印自己设
z-index: 10起步，别用1或auto；如果页面有全局fixed导航栏（z-index: 100），水印至少得101 - 检查是否有父级元素设了
isolation: isolate或contain: layout，它们也会隔离层叠环境
真正容易被忽略的是：水印文字如果带图标（比如用伪元素或 <svg>），opacity 会让整个组合一起发虚，而 rgba() 背景不会影响子元素渲染质量——这点在 Retina 屏和缩放 125% 的 Windows 环境下尤为明显。
