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