必须给父容器设 position: relative，否则 absolute 水印会相对于 body 定位而跑偏；水印元素设 position: absolute; bottom: 8px; right: 8px；推荐用伪元素 ::after + SVG base64 实现，加 pointer-events: none 防拦截交互。
用 position: absolute 固定水印到右下角，父容器必须有定位上下文
直接给水印元素设 position: absolute; bottom: 0; right: 0 是常见做法，但**一定失效**——因为 absolute 的定位基准是「最近的已定位祖先」（即 position 值为 relative、absolute、fixed 或 sticky 的父级）。如果父容器是默认的 static，水印就会相对于 body 定位，完全跑偏。
实操建议：
- 给图片的直接父容器（比如一个
<div>）加上position: relative - 水印元素（如
<div class="watermark">或<img class="watermark">）设为position: absolute; bottom: 8px; right: 8px（加点边距更自然） - 确保水印元素在 HTML 中位于父容器内部，且 DOM 顺序不影响层叠（必要时加
z-index）
水印图片要透明、缩放适配，避免遮挡主图关键区域
纯 CSS 实现水印图，不是简单贴一张 PNG 就完事。常见问题：水印太实、太大、边缘生硬、在高分辨率屏上糊。
关键控制点：
立即学习“前端免费学习笔记（深入）”；
- 用
opacity: 0.15或rgba(255,255,255,0.1)控制透明度，别用半透明 PNG 源文件——CSS 控制更灵活 - 用
width: 120px; height: auto或max-width: 20%避免水印在小图上溢出 - 加
pointer-events: none，防止水印拦截鼠标事件（比如点击不到底下的图片） - 若需响应式，可配合
@media (min-width: 768px)调整bottom/right值或尺寸
用伪元素 ::after 实现纯 CSS 水印，省去额外 HTML 标签
不想多写一层 <div>？用伪元素更干净，也方便复用类名。
.image-container {
position: relative;
display: inline-block;
}
.image-container::after {
content: "";
position: absolute;
bottom: 12px;
right: 12px;
width: 80px;
height: 80px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-size='14' fill='%23fff' opacity='0.1'%3E©%3C/text%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
}
注意：background-image 里用了 URL 编码的 SVG，避免额外请求；dominant-baseline 和 text-anchor 确保文字居中；opacity 写在 SVG 里比用伪元素整体 opacity 更稳妥（避免模糊文字边缘）。
移动端或 Flex/Grid 布局下，bottom/right 可能失效
如果父容器用了 display: flex 或 display: grid，且子项（图片）本身是弹性项目，absolute 子元素的 bottom/right 仍以父容器为参考，但可能因父容器尺寸未显式设定（比如高度由内容撑开）导致定位漂移。
排查和修复建议：
- 用浏览器开发者工具检查父容器是否真有高度——没有就加
min-height: 1px或height: fit-content - 避免对
flex-item直接设position: relative，优先包裹一层<div>再定位 - 在 iOS Safari 上，若父容器含
transform，会创建新的包含块，也可能干扰定位，此时改用fixed+calc()（慎用，仅限全屏场景）
最稳的路径始终是：明确父容器尺寸 + 显式 position: relative + absolute 子元素带偏移值。任何“自动适应”的幻想，都会在某个安卓 WebView 或旧版 Safari 里破灭。
