父容器必须设 position: relative，否则 absolute 水印会相对于 body 定位而飘走；需用 div 包裹图片和水印并设 relative，配合 bottom/right 百分比值、z-index 和 overflow 检查确保精准显示。
父容器必须设 position: relative
绝对定位的水印不会自动“粘”在图片上，它只认最近一个非 static 的祖先。如果图片是响应式的（比如用了 img-fluid 或 max-width: 100%），而它的父元素没设 position: relative，那 position: absolute 的水印就会相对于 body 定位——图片一缩放，水印就飘走。
常见错误写法：
.my-img { max-width: 100%; height: auto; }
.watermark { position: absolute; bottom: 10px; right: 10px; }
这行不通，因为 .my-img 自身是 static，水印找不到定位上下文。
- 正确做法：用一个
div包住图片和水印，并给它加position: relative - 这个
div还要继承图片的响应式行为，比如加width: 100%或套用img-fluid类 - 别把
position: relative加到img标签上——img是替换元素，设了也没用，且可能触发某些浏览器的渲染异常
top/left 用百分比比用像素更稳
当图片宽高随视口变化时，固定像素值（如 top: 20px）会导致水印在小屏上太靠下、大屏上太靠上。百分比值能随容器缩放同步偏移，更适合响应式场景。
立即学习“前端免费学习笔记（深入）”；
例如想让水印始终在右下角 5% 边距处：
.watermark {
position: absolute;
bottom: 5%;
right: 5%;
}
- 优先用
bottom+right（而非top+left）配合右下角水印，逻辑更直观 - 避免混用单位：比如
bottom: 10px和right: 5%，会导致缩放时错位加剧 - 如果水印是文字，记得加
transform: translate(0, 0)强制 GPU 加速，减少小字号旋转/缩放时的模糊
水印被裁掉？检查 overflow 和 z-index
即使定位写对了，水印也可能看不见——大概率是被父容器裁剪，或被其他内容盖住。
典型现象：position: absolute 水印在开发工具里能看到 DOM，但页面上不显示。
- 先看父容器是否设置了
overflow: hidden或overflow: auto；临时加overflow: visible !important测试是否恢复 -
z-index别设负数（比如z-index: -1），它会让水印掉到背景层下面；设z-index: 2起步，确保高于图片内容 - 如果父容器有
transform、will-change或filter，它会创建新的 stacking context，导致z-index行为异常——这时得在该容器上显式设z-index: 1再试
伪元素 + SVG base64 是最轻量可靠的方案
用 <div class="watermark"> 做水印，需要额外 HTML 结构，还可能被误点或选中。改用 <code>::after 伪元素 + 内联 SVG，零 DOM、无交互干扰、缩放不失真。
示例（右下角文字水印）：
.watermark-container::after {
content: "";
position: absolute;
bottom: 8px;
right: 8px;
width: 120px;
height: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill='%23fff' opacity='0.3' text-anchor='middle' dominant-baseline='middle'%3ECONFIDENTIAL%3C/text%3E%3C/svg%3E");
pointer-events: none;
z-index: 2;
}
- SVG 中的空格、
%、引号必须 URL 编码，否则背景失效 - 别依赖字体本地安装，SVG 内直接指定
font-family: sans-serif - 如果水印需动态注入（如带用户名），用 CSS 变量 +
attr()不现实，此时应由 JS 注入 base64 字符串
position: relative 很容易被覆盖或遗漏。
