用 position: absolute + bottom: 0 贴底的前提是父容器必须是非 static 定位（如 relative），否则元素会相对于最近已定位祖先或根元素定位；同时需确保父容器有高度且未被 overflow: hidden 裁剪。
用 position: absolute + bottom: 0 贴底的前提是什么
直接写 bottom: 0 不一定生效——父容器必须是「定位上下文」，也就是其 position 值不能是 static（默认值）。否则 absolute 元素会往上找最近的已定位祖先，最终可能相对于 或 贴底，而不是你想要的父盒子。
常见做法是给父容器加 position: relative，它不改变布局位置，但能创建定位上下文：
.parent {
position: relative;
height: 300px;
}
.child {
position: absolute;
bottom: 0;
left: 0; /* 可选：控制水平位置 */
}
bottom: 0 和 top: auto 的关系
当同时设置 top 和 bottom，浏览器会优先按 top 计算，bottom 被忽略。所以要确保贴底生效，得显式重置冲突属性：
-
top: auto是安全写法（尤其在复用样式或动态切换时） - 如果父容器有 padding 或 border，
bottom: 0会让元素底边紧贴父容器内容区底边，不是可视区最底部 - 想贴到父容器的 border 底边？用
box-sizing: border-box确保高度计算包含 border
为什么有时元素“消失”或位置异常
典型现象：元素不见了、跑出视口、和其他 absolute 元素重叠。原因往往不是 bottom 写错了，而是：
