bottom属性不生效主因是父级未创建定位上下文；需逐层检查最近已定位祖先（position≠static），并确保其有高度，或改用flex布局、absolute+relative组合实现贴底。
bottom 属性不生效，先看父级有没有定位上下文
绝对定位（position: absolute）的 bottom 值，是相对于「最近的已定位祖先元素」计算的。如果所有父级都用默认的 position: static，那它就会上溯到 根元素——此时 bottom: 0 是贴浏览器窗口底边，不是你期望的“容器底边”。
常见错误现象：bottom: 0 写了但没反应，元素还在顶部或原位置不动。
- 检查离目标元素最近的父级是否设置了
position: relative、absolute或fixed；没设就等于没建立定位上下文 - 别只看直接父级，要逐层往上查；有时候中间嵌套了多个
div，真正起作用的是第 3 层那个加了relative的 - 如果父级用了
position: sticky，它在未触发粘性前不算“已定位”，bottom依然会失效
父级高度为 0，bottom 就没地方可“贴”
即使父级加了 position: relative，如果它自身高度是 0（比如内部全是浮动或绝对定位子元素，没内容撑开），那 bottom: 0 看起来还是无效——因为“底边”实际在父级的上边缘位置。
使用场景：做弹层、下拉菜单、侧边栏浮层时容易遇到。
- 给父级加个临时
height: 200px测试一下，如果bottom突然生效，说明就是高度没撑开 - 更稳妥的做法是让父级有真实内容，或用
min-height+padding占位，而不是依赖子元素去撑高 - 避免用
height: 100%，它只对有明确高度的父级才有效；很多情况下得配合display: flex或grid才能可靠继承
iOS 上 fixed bottom 失效，和父级高度无关但和 viewport 有关
position: fixed; bottom: 0 在 iOS Safari 中常“飘走”，尤其页面内容少、没撑满一屏时。这不是父级高度问题，而是 Safari 对 fixed 的实现逻辑：它按 visualViewport 动态计算，软键盘弹出、地址栏收起都会导致 bottom: 0 指向错误位置。
性能影响：频繁监听 resize 或 scroll 来重设 bottom 值，容易卡顿或错位。
- 最轻量解法：给
body加min-height: 100vh，确保页面至少占满一屏可视区 - 避免在
fixed元素外层套 transform、will-change: transform或动画中的父级，这些会创建新的层叠上下文并干扰 fixed 定位 - 真要兼容软键盘场景，别死守
fixed，改用position: absolute+bottom: env(safe-area-inset-bottom)，再配合visualViewport高度变化动态调整
margin-bottom 贴不到父容器底部，本质是它根本不是干这事的
margin-bottom 是推下面的兄弟元素，不是拉自己到底部。指望它让子元素“贴住父级底边”，从 CSS 盒模型原理上就走错了路。
容易踩的坑：加了 margin-bottom: 0 发现毫无变化，或者加了大数值反而把整个父容器往下顶。
- 想贴底，优先用
position: absolute; bottom: 0（记得父级加relative） - Flex 布局更干净：
display: flex; flex-direction: column;父级 +margin-top: auto子级，一行代码搞定 - 别用
margin-top推下来——外边距合并（margin collapse）会让效果不可控，尤其父级没border或padding时
bottom 失效往往不是单一原因。最常被忽略的是：你以为的“父级”其实没参与定位上下文，而你调试时只盯着样式面板看 bottom 值有没有写错。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
