绝对定位右下角对齐的核心是同时设置right:0和bottom:0，使元素右、下边界紧贴包含块对应边缘；包含块为最近的定位祖先（relative/absolute/fixed/sticky），无则退化为视口。
absolute 定位右下角对齐的核心原理
用 position: absolute 实现右下角对齐，关键不是“贴右下”，而是**让元素的右边界和下边界分别紧贴其包含块（containing block）的右、下边缘**。这必须同时设置 right: 0 和 bottom: 0，缺一不可。
注意：该包含块默认是最近的、position 值为 relative、absolute、fixed 或 sticky 的祖先元素；若没有，则退化为初始包含块（通常是视口）。
为什么只设 right: 0 不够
只写 right: 0 会让元素右对齐，但垂直方向仍按正常文档流或默认 top: auto 计算，通常会卡在顶部附近，离“右下角”差很远。
-
top和bottom是互斥优先级关系：当两者都未显式设置时，top由文档流决定；一旦设了bottom，浏览器就放弃自动计算top，转而根据bottom+ 高度反推位置 - 若元素高度不固定（比如内容动态），仅靠
bottom: 0就能确保底边锚定，无需知道具体高 - 不设
left或top是安全的——它们会自然变为auto，不影响right/bottom生效
常见错误与兼容性注意点
实际写的时候容易掉进这几个坑：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
position: relative，导致元素相对整个页面定位（尤其在滚动页中“漂”到视口右下，而非预期容器右下） - 父容器有
padding或border，但忘记用box-sizing: border-box，导致right: 0; bottom: 0后元素被遮挡或溢出 - 在 Flex 或 Grid 容器里嵌套 absolute 元素，此时包含块仍是最近的定位祖先，不是 flex item 本身——别指望
align-self: flex-end和absolute混用能简化逻辑 - IE8+ 支持
right/bottom，但 IE7 及更早需 hack；现代项目基本不用考虑
最小可用示例
下面这段 HTML/CSS 能稳定把按钮钉在容器右下角：
.container {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
.button {
position: absolute;
right: 12px;
bottom: 12px;
}
其中 right: 12px 和 bottom: 12px 是常用内边距值；如果要贴死边缘，就写 0。真正要注意的，永远是那个 position: relative 的父容器——它看不见，但缺它就全乱。
