移动端“吸底”不可靠是因为fixed元素在iOS/安卓WebView中受视口重算、安全区、祖先transform等影响，需同时设left:0/right:0、固定height、viewport-fit=cover及padding-bottom:env(safe-area-inset-bottom)等组合方案。
移动端“吸底”不是加个 bottom: 0 就完事——它在 iOS Safari 和多数安卓 WebView 中会跳、会遮、会消失，本质是浏览器对视口高度的动态重算没被正确约束。
为什么 position: fixed; bottom: 0 在真机上不可靠
单独写 bottom: 0 的 position: fixed 元素，在 Safari 地址栏收放、键盘弹出、页面滚动时，常出现位置偏移甚至完全消失。这不是 bug，是浏览器按当前视口高度重绘 fixed 元素导致的。尤其 iPhone X 及后续机型，bottom: 0 实际落在 Home Indicator 下方，按钮点不到。
- 必须同时声明
left: 0和right: 0，否则横屏或缩放时左右留白 - 只靠
width: 100%在部分 WebView（如微信 8.0.32 前）中会失效 -
height必须为固定值（如56px），禁用100vh、100%或clamp() - 祖先节点含
transform、filter、perspective或will-change时，fixed会退化为相对该祖先定位
env(safe-area-inset-bottom) 怎么加才生效
这个 CSS 环境变量不会自动生效，必须配合 <meta> 才能读到真实值。不加 viewport-fit=cover，它永远返回 0。
- 在
中加：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - 把
padding-bottom: env(safe-area-inset-bottom)加在底部栏容器自身上，不是body，也不是父级 - 别写
bottom: env(safe-area-inset-bottom)—— Safari 会静默丢弃整条声明 - 若需额外留白（比如 8px），低版本 Safari（15.4 前）不支持
calc(8px + env(safe-area-inset-bottom))，得拆成两行：padding-bottom: 8px;和padding-bottom: calc(8px + env(safe-area-inset-bottom));
怎么防止内容被底部栏遮住
position: fixed 脱离文档流，主体内容不会自动避让。靠 margin-bottom 不可靠，某些安卓 WebView 对 fixed 元素的 margin 计算异常。
立即学习“前端免费学习笔记（深入）”；
- 给主体容器（如
<main></main>或包裹内容的<div class="page">）加 <code>padding-bottom - 值至少为：
calc(56px + env(safe-area-inset-bottom))（假设栏高 56px） - 如果栏用了
box-sizing: border-box，padding-bottom只需覆盖内容区；否则要手动加上 border 和 padding - DOM 结构上，底部栏必须放在
最末尾，避免被父容器overflow截断 - 右下角按钮推荐
bottom: 24px; right: 24px，不贴边，避免遮系统任务栏或误触导航栏 - 它不需要
left: 0和right: 0，也不需要适配env(safe-area-inset-bottom) - 必须设显式宽高（如
width: 56px; height: 56px），确保触摸热区 ≥ 44×44px - 禁用
transform: translateZ(0)等硬件加速 hack，可能引发键盘失焦或滚动卡顿 - 若页面高度不足一屏，iOS Safari 会让按钮“粘滞消失”，此时给
body加min-height: 100vh即可稳定锚点
右下角悬浮按钮和底部工具栏的区别在哪
右下角按钮（如反馈按钮）和底部工具栏虽然都用 position: fixed，但锚点逻辑和容错要求完全不同。
最易被忽略的是祖先节点的 transform —— 很多 rem 适配方案或动画库会在 html 或 body 上加 transform: scale()，这会让所有 fixed 元素失效，且控制台不报错。检查时直接用浏览器开发者工具逐层看 computed style，比猜更省时间。
