必须给图文共用的直接父容器加position: relative，否则absolute水印会相对于body定位而飘出；需配合top/left百分比、transform居中、rgba背景及pointer-events: none确保精准钉位、清晰可读且不阻断交互。
文字水印贴不住图片，八成是定位上下文没建对——position: relative 必须加在图文共用的**直接父容器**上，而不是图片本身或更外层的布局容器。
为什么文字水印总“飘”到页面左上角？
因为 position: absolute 的锚点是「最近的已定位祖先」。如果包裹图文的 <div> 没设 position: relative，浏览器就会一路往上找，最终落到 <body> 上定位。
- 别给
<img>加position: relative—— 它是替换元素，某些浏览器下不触发可靠包含块行为 - 如果用了
<picture>或框架栅格类（如 Bootstrap 的col-*），要检查其父容器是否被意外覆盖了position值（比如被设成了static） - 用浏览器开发者工具选中水印元素，看 computed 样式里
offsetParent是不是你预期的那个容器；不是就说明定位上下文断了
文字水印怎么居中又不模糊？
用 top: 50% + left: 50% + transform: translate(-50%, -50%) 是最稳的居中方式，它不依赖字体大小、行高或容器固定尺寸。
- 千万别用
opacity降透明度来“做背景”，那会让文字发虚、图标变淡；正确做法是给文字本身加background-color: rgba(0, 0, 0, 0.6) - 若需旋转（如 -45°），写成
transform: translate(-50%, -50%) rotate(-45deg)，顺序不能反——先位移再旋转，否则旋转中心偏移 - 字体大小建议用
clamp(1rem, 2.5vw, 1.5rem)，兼顾小屏可读与大屏不撑爆
水印盖住按钮/表格点不动怎么办？
这是没关指针事件拦截——只要水印像素 alpha > 0，它就默认捕获所有鼠标事件，哪怕 opacity: 0.1 也一样。
立即学习“前端免费学习笔记（深入）”；
- 必须加
pointer-events: none到水印元素上，否则点击按钮没反应、hover 失效、下拉菜单打不开 - 同时加
user-select: none和-webkit-user-select: none，防长按误选、双击触发系统菜单（尤其移动端） - 如果水印里真有链接（极少见），不要整个元素关
pointer-events，而是用<span>包文字，只对文字部分设pointer-events: none
响应式下水印位置错乱或消失？
常见于图片异步加载、宽高未约束、或容器塌陷导致定位参考丢失。
- 给父容器设
display: inline-block或显式width/height（或aspect-ratio），防止无图时容器高度为 0 - 图片加
max-width: 100%+height: auto，确保缩放时比例可控 - 水印元素加
z-index: 2（图片默认 z-index 是 auto，等价于 0），避免被其他层遮挡 - 如果用伪元素（
::before）实现水印，注意它默认没有内容尺寸，得靠content: ""+display: block+ 显式宽高撑开
最容易被忽略的是：容器是否真的“已定位”。很多人写了 position: relative，但被 CSS 优先级更高的规则覆盖了，或者被 JS 动态移除了 class。调试时第一件事，就是打开开发者工具，盯着那个父容器的 computed 样式里 position 值是不是真的 relative。
