position: fixed; bottom: 0 需配合 left: 0、right: 0、body padding-bottom（含 safe-area-inset-bottom）、键盘弹出时 focus/blur 控制显隐，且 dom 必须置于 body 末尾，避免父容器 transform/overflow 干扰。
直接用 position: fixed + bottom: 0 是基础，但“牢牢固定”真正卡点在于：不遮内容、不闪动、不被键盘顶飞、不因父容器失效——缺一不可。
为什么 position: fixed; bottom: 0 单独写会出问题
它只让元素贴到视口底边，但完全脱离文档流，正文末尾不会自动上移。结果就是：文字、按钮、表单控件直接钻进悬浮条下面，用户点不到、看不清。这不是 bug，是 CSS 的设计逻辑。
- 安卓 WebView 和 iOS Safari 行为一致，都无视这个“占位”需求
- 如果悬浮条高
56px，而body没预留空间，第 n 行内容就从56px处开始渲染 - 某些微信 iOS 客户端（如 8.0.32 之前）还会忽略
viewport-fit=cover，导致 iPhone 底部安全区适配失效
必须加的三件套样式和 body 预留空间
悬浮条自身样式不能只写 bottom: 0，这四行要一起上：
position: fixed; bottom: 0; left: 0; right: 0;
同时，body 必须主动腾地方：
- 若高度固定为
56px：body { padding-bottom: 56px; } - 兼容 iPhone 底部 Home Indicator：
body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } - 低版本 Safari（15.4 之前）不支持
calc()混用env()，可降级写两行，后一条覆盖前一条
移动端键盘弹出时悬浮条飘起来怎么办
iOS Safari 软键盘弹出会缩 viewport 高度，fixed 元素随之上浮，常盖住输入框。这不是 bug，是浏览器对缩放的响应行为。
- 最简方案：监听
focus和blur事件，获焦时临时隐藏：element.style.display = 'none'；失焦后延时300ms恢复，避免快速切换闪烁 - 更健壮做法：监听
resize，检测window.innerHeight是否比初始值小超200px，自动隐藏；但 Android 和 iOS 触发时机差异大，简单场景优先用 focus/blur - 别在悬浮条里放
<input>或<textarea></textarea>，iOS 键盘弹出后 fixed 元素错位概率极高
DOM 位置和父容器陷阱
悬浮条的 HTML 必须是 的最后一个子节点。很多框架或 CMS 会在 前塞统计脚本、懒加载代码，但 <div class="bottom-bar"> 得排在最末尾。
<ul><li>部分安卓 WebView 对父容器 <code>overflow 敏感：如果悬浮条被包在某个 <div> 里，且该 div 有 <code>transform 或 overflow: hidden，fixed 会直接失效
margin-top: auto 或 flex: 1 模拟“沉底”，那是给真页脚（<footer></footer>）用的，不是悬浮栏999 足够；设成 99999 容易和弹窗、modal 层级冲突真正难的不是定位本身，而是键盘收放、安全区变化、父容器干扰这些边界情况——它们往往只在特定机型或操作路径下暴露，上线后才浮现。写完记得在 iOS 真机上反复测 focus/blur 和横屏缩放。
