必须给父容器设position: relative，否则absolute水印会相对于body定位；水印元素设position: absolute; bottom: 8px; right: 8px，推荐伪元素+svg base64实现并加pointer-events: none。
直接用 position: absolute 配合 bottom: 0 和 right: 0 就能精准把图片钉在容器右下角，但前提是父容器得设 position: relative，否则它会相对于整个页面定位。
用 position: absolute 把 <img> 固定在容器右下角
这是最常用、兼容性最好、语义也最清晰的做法。关键不在图片本身，而在它的父容器是否“接管定位上下文”：
- 给父容器（比如
<div>）加 <code>position: relative—— 它就变成“定位参考框” - 给
<img>加position: absolute; bottom: 0; right: 0 - 如果图片超出父容器边界，可加
max-width: 100%或固定宽高控制尺寸 - 注意：不要依赖
margin或float，它们无法实现精确角落锚定 -
position: fixed; bottom: 12px; right: 12px是最简写法 - 必须加
z-index（如z-index: 999），否则可能被其他内容遮挡 - 移动端需注意：
fixed在 iOS Safari 旧版本中可能触发回弹或错位，建议加transform: translateZ(0)强制硬件加速 - 避免在
body直接写fixed图片——它会脱离文档流，但不会影响布局，这点和absolute不同 -
background-image: url(...)—— 图片路径不能错，相对路径以 CSS 文件位置为基准 -
background-position: bottom right或right bottom（两者等效，顺序不影响） -
background-repeat: no-repeat—— 没加这句，图片默认平铺，右下角只会显示一个“切片” - 容易忽略：
background-size默认是原图大小，若图片太小，右下角可能只剩空白；太大则溢出不可见，建议按需加contain或100% auto -
float: right只能把图片推到行末，但无法控制垂直位置；加clear: both后还可能塌陷父容器高度 -
text-align: right对块级元素无效，对内联图片只管水平，且受父容器line-height干扰 - 用
margin-left: auto+display: block只能右对齐，无法拉到底部——除非父容器是 flex 布局并配flex-direction: column和justify-content: flex-end，但这比absolute更重
让图片始终在视口右下角（不随滚动移动）
要的是“全局固定”，比如客服按钮、返回顶部图标，那就用 position: fixed：
background-image 放右下角时常见翻车点
如果你不是放 <img> 标签，而是用 CSS 背景图，那必须配齐三件套：
别用 float 或 text-align 去“凑”右下角
这些属性本质是为文本流设计的，强行用于角落定位会出问题：
真正卡住人的地方，往往不是语法写错，而是忘了给父容器加 position: relative，或者误以为 background-position 能作用于 <img> 标签本身——它只对背景图生效，对 HTML 图片标签完全无效。
