用 position: absolute 叠加水印需设 pointer-events: none 防事件拦截、user-select: none 防误选复制、opacity: 0.15–0.3 平衡可见性与干扰，并确保定位上下文正确（如父级设 position: relative）。
直接用 position: absolute 叠加水印最简单，但不设对几个关键属性，水印要么看不见、要么点不了按钮、要么一复制就粘出“© 机密”——这三类问题占实际调试的 80% 以上。
为什么水印元素必须加 pointer-events: none
水印盖在图片或表格上时，如果不加这个声明，它会拦截所有鼠标事件：点击按钮没反应、下拉菜单打不开、表格行 hover 失效。这不是 bug，是浏览器默认行为——任何非透明像素都会捕获指针事件。即使 opacity: 0.1，只要 alpha > 0，它就仍算“可交互区域”。
-
pointer-events: none是强制开关，关掉后事件会穿透到下层元素 - 别写成
pointer-events: auto或漏掉分号，IE11 及更老版本不支持该属性，但现代项目基本可忽略 - 如果水印里含链接或按钮（极少见），不能全局关，得只关文字部分：用
span包文字，再单独设pointer-events: none
user-select: none 不只是防复制，更是防误操作
用户长按拖选页面时，水印文字容易被顺带选中，松手后出现蓝色高亮框，干扰视觉；更糟的是，在移动端，选中会触发系统菜单（复制/搜索），打断正常流程。加 user-select: none 后，连双击都不会触发文本选择。
- 它不影响
input或textarea内容，只作用于水印这类装饰性文本 - 需配合
-webkit-user-select: none兼容 Safari 和旧版 Chrome（2026 年仍有必要） - 注意：若水印是 SVG 图片而非文字，此属性无效，此时靠
pointer-events: none就够了
opacity 值选 0.1 还是 0.3？看使用场景
透明度不是越低越好。设太低（如 opacity: 0.05）在暗色背景或高对比图上根本看不见；设太高（如 opacity: 0.7）又遮内容、像贴纸。实际取值取决于水印用途：
立即学习“前端免费学习笔记（深入）”；
- 版权标识（如 “© Company”）：推荐
opacity: 0.15～opacity: 0.25，兼顾识别性与不干扰 - 敏感标记（如 “内部资料”、“机密”）：可用
opacity: 0.3，确保一眼可见 - 打印场景：
opacity在 PDF 中可能被进一步压低，建议打印专用样式里提高到0.4并加@media print单独控制 - 别用
rgba(0,0,0,0.2)替代opacity，前者只影响颜色通道，后者影响整个元素（含边框、阴影等）
absolute 定位失效的三个高频原因
水印没出现在预期位置？90% 是定位上下文错了。绝对定位永远相对于最近的 position 不为 static 的祖先，而不是父元素 HTML 结构。
- 父容器漏了
position: relative：水印会一路往上找，最终相对body或视口定位，滚动时飘走 - 中间某层用了
transform、filter或will-change：这会创建新的 containing block，导致absolute相对它定位，而非你写的那个relative父容器 - 用
top: 50%; left: 50%却没配transform: translate(-50%, -50%)：结果是左上角居中，不是元素中心居中——这是新手最常踩的像素级偏差
真正难的不是写出来，而是让水印在缩放、滚动、打印、深色模式、不同设备 DPI 下都稳定不破形。SVG 内联背景 + pointer-events: none + user-select: none 这套组合，比纯 DOM 水印抗干扰性强得多，但代价是无法用 JS 动态改文字——得权衡。
