bottom 只在有定位上下文的父元素内生效；父元素需设 position: relative/absolute/fixed，否则 bottom 相对于视口；其值基于父定位框底边计算，受 margin、border、box-sizing 等影响。
用 position: absolute 时 bottom 不生效？先看父元素有没有定位上下文
直接结论：bottom 只在「有定位上下文」的父元素内才按预期工作。如果父元素是默认的 static，bottom 会相对于初始包含块（通常是视口），而不是你看到的那个“父容器”。
常见错误现象：div 设了 position: absolute; bottom: 20px;，结果飘到整个页面底部去了，完全不贴着它视觉上的父盒子。
- 父元素必须显式设置
position为relative、absolute或fixed（sticky在部分场景也行，但兼容性要留意） -
position: static（默认值）不行，哪怕加了z-index或其他样式也不行 - 如果父元素本身是
absolute，那它的定位上下文又取决于它的父级——得一路往上找最近的「非 static 定位祖先」
bottom 的数值是相对于父定位框的底边，不是内容区
很多人以为 bottom: 10px 是让元素底边离父元素内容底部空出 10px，其实它是让元素的**外边距盒底边**对齐到父定位框底边向上 10px 的位置。这中间差了一个 margin 和 border 的影响。
使用场景：做右下角悬浮按钮、表单输入框下方提示条、卡片内状态标签等需要精确锚定底部的布局。
- 如果父元素有
padding-bottom，bottom: 0的子元素不会贴着 padding 区，而是贴着 content box 底边 - 如果子元素自己有
margin-bottom，它会把整个盒模型往下推，导致实际离父底边更远 - 想让子元素底边真正“离父内容区底边 10px”，推荐用
transform: translateY(10px)配合bottom: 0，而不是调大bottom值
IE 和旧版 Safari 对 bottom + height: auto 的计算不一致
当绝对定位元素没设 height，又依赖 bottom 和 top 同时存在时（比如 top: 10px; bottom: 10px;），不同浏览器对高度的推算逻辑不同。IE 会按父高度减去 top/bottom 值来定高；而 Safari 13 之前可能忽略 bottom，只按内容撑开。
性能影响不大，但布局会错乱——尤其在响应式容器里，父高度动态变化时更明显。
- 避免同时写
top和bottom且不设height或max-height - 真要实现“垂直填满+留边”，优先用
inset（现代写法：inset: 10px auto 10px 0），但注意 Chrome 110+、Firefox 119+、Safari 16.4+ 才稳定支持 - 兼容性要求高就老实用
top+height: calc(100% - 20px)，别赌bottom的自动计算
用 transform 微调比改 bottom 更安全
当你发现 bottom: 5px 总是偏一点点，反复调数字也没用——大概率是字体基线、行高、或父元素 box-sizing 混合导致的视觉误差。这时候硬调 bottom 是在和渲染引擎较劲。
真正可控的做法是固定一个基准（比如 bottom: 0），再用 transform 做像素级偏移。
-
transform: translateY(3px)比bottom: -3px更可靠：前者只移动渲染层，不影响文档流和尺寸计算 - 配合
will-change: transform可预防部分浏览器重绘抖动（尤其是动画中） - 注意：
transform会创建新的层叠上下文，如果 z-index 行为异常，先检查是不是这里引起的
复杂点在于，bottom 看似简单，但它背后绑着定位上下文、盒模型、浏览器渲染差异三层逻辑。少一个条件没满足，就容易“看起来写了却不起作用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
