bottom 值生效的前提是存在已定位祖先（position 为 relative/absolute/fixed/sticky），否则回退至视口；同时需避免 top 冲突、父容器高度为零、打印/缩放异常及动画中未重置对立属性。
bottom 值生效的前提是定位上下文存在
设置 bottom: 0 却跑到顶部，最常见原因是父容器没设 position: relative（或其它非 static 值）。position: absolute 元素会逐级向上查找「已定位祖先」——即 position 为 relative、absolute、fixed 或 sticky 的最近父元素。找不到就回退到视口，此时 bottom: 0 指的是「距浏览器窗口底边 0px」，而页面内容通常很短，结果就是元素紧贴视口底部，视觉上像“卡在顶部下方空白处”，尤其当 body 高度不足时更明显。
- 用 Chrome 开发者工具检查该元素的 computed
position和containing block，看它实际参照的是哪个容器 - 父容器若只有
width和padding，但没写position，那它仍是static，不构成定位上下文 -
bottom和top同时存在时，top优先级更高；若top: auto未显式声明，浏览器可能保留继承值或默认 0
bottom 定位被 top 或 height 冲突覆盖
即使定位上下文正确，bottom 也可能被其他样式压制。比如父容器高度为 0（仅含绝对定位子元素），或子元素同时写了 top: 0 和 bottom: 0 —— 此时浏览器按规范会忽略 height，用「包含块高度 − top − bottom」反推高度，结果可能是负值或意外拉伸，导致定位错乱。
- 检查 computed 样式中
top是否为0px（哪怕 CSS 里没写，也可能来自重置或继承） - 避免同时设置
top和bottom，除非你明确需要撑满高度且父容器高度固定 - 父容器若靠内容撑高，而内容又全是
position: absolute，那它的计算高度就是 0，bottom: 0实际无参照基准
打印或缩放场景下 bottom 表现异常
在 @media print 中，bottom 基本失效：打印引擎不维护定位上下文，position: absolute 元素会回退到初始包含块左上角，bottom 值失去语义。缩放时（尤其是 Safari 或 DPR 非整数设备），小数像素四舍五入可能导致 bottom 计算偏移，视觉上“跳到顶部附近”。
- 打印样式中必须重置：
position: static; bottom: auto;，否则残留值仍参与计算 - 不要依赖
transform: translateY()模拟 bottom 效果，它不触发文档流重排，且在打印中常被忽略 - 测试时务必打开 Chrome 打印预览（
Ctrl+P），不能只看屏幕渲染
动画中 bottom 切换时位置突变
用 transition 动画切换 bottom 时，若未同步重置冲突属性，会出现“闪回顶部”。典型如从 bottom: 0 → top: 0，但没写 bottom: auto，浏览器会同时尝试满足两个定位指令，最终以 top 为准，造成瞬间跳变。
立即学习“前端免费学习笔记（深入）”；
- 动画切换定位方向时，必须显式设另一方向为
auto：top: 0; bottom: auto; - 只过渡一个方向属性（如只
transition: bottom 0.3s），避免top和bottom同时参与计算 - 父容器高度必须明确（
height或min-height），否则动画过程中高度塌陷会导致定位基准漂移
!important 解决不了问题，得回到那个父容器，确认它有没有真正“成为坐标系”。 
