bottom: 0 不生效主因是祖先元素触发 transform/will-change/filter 创建新包含块，使 fixed 元素相对其定位而非视口；ios safari 地址栏动态变化导致遮挡；fixed 元素需用 padding-bottom 让位；z-index 失效常因父级创建层叠上下文。
bottom: 0 不生效？检查父容器是否意外触发了 transform 或 will-change
很多情况下 position: fixed 设了 bottom: 0 却没贴底，不是 CSS 写错了，而是祖先元素加了 transform（比如 transform: translateZ(0)）、will-change: transform，或者 filter。这些属性会创建新的层叠上下文和**包含块（containing block）**，导致 fixed 元素不再相对于视口定位，而是相对于这个新包含块。
- 用浏览器开发者工具检查工具栏的任意父级，看 computed 样式里有没有
transform、will-change、filter、perspective - 临时删掉这些样式，确认工具栏是否立刻回归视口底部
- 如果必须保留这些效果，改用
position: absolute+ 手动监听scroll和resize动态更新top值（不推荐，有性能开销）
移动端 Safari 下 bottom: 0 被地址栏遮住怎么办
iOS Safari 在滚动时会隐藏/显示地址栏，导致视口高度动态变化，bottom: 0 固定在“初始视口底部”，而不是当前可见区域底部，结果被弹出的地址栏盖住。
- 不要依赖
vh单位（比如height: 100vh）来撑开页面，它取的是初始视口高度 - 用 JavaScript 监听
resize事件，读取window.innerHeight并设置工具栏的top为innerHeight - 工具栏高度（更稳妥） - 或加一行
viewportmeta：<meta name="viewport" content="viewport-fit=cover">，配合env(safe-area-inset-bottom)适配刘海/Home Indicator
fixed 工具栏挡住页面内容？用 padding-bottom 替代 margin-bottom
position: fixed 的元素已脱离文档流，下面的内容不会自动“让位”，直接往上顶，造成文字被遮挡。
- 给 body 或主内容容器加
padding-bottom，值等于工具栏高度（例如padding-bottom: 60px） - 避免用
margin-bottom—— 它对脱离流的元素无效，且可能引发外边距合并问题 - 如果工具栏高度不固定（比如响应式缩放），用 CSS 自定义属性 + JS 同步更新
--toolbar-height，再在padding-bottom中引用
z-index 失效？确认工具栏没有被同级 stacking context 截断
即使写了 z-index: 9999，工具栏仍被其他元素盖住，大概率是它的某个父容器设置了 z-index 且创建了 stacking context，把工具栏“框死”在那个层级内。
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具的 Layers 面板（Chrome），看工具栏是否被包裹在一个独立的合成层中
- 检查工具栏所有父级的
z-index、opacity、transform、filter—— 这些都可能创建 stacking context - 最简解法：把工具栏移出所有带
z-index的容器，直接挂到下
工具栏看着简单，但跨设备、跨浏览器的定位行为差异藏得深；尤其当页面结构复杂或用了现代 CSS 效果时，bottom: 0 很容易变成“看起来写了，其实没起作用”的典型。
