只写position: fixed; bottom: 0会出问题，因其脱离文档流不占空间，导致正文从视口底端渲染而被遮盖；必须配合left: 0、right: 0、固定height、body padding-bottom（含env(safe-area-inset-bottom)）及viewport-fit=cover meta才能可靠适配。
直接用 position: fixed + body 预留 padding-bottom 就能跑通绝大多数场景，但漏掉任意一项都可能在 iOS 或微信 WebView 里被遮住、错位、闪动。
为什么只写 position: fixed; bottom: 0 会出问题
它让元素脱离文档流，不占空间——页面正文最后一行会从视口底部开始渲染，刚好被悬浮条盖住。这不是 bug，是 CSS 行为本身。用户点不到按钮、看不清文字、表单提交键被挡住，都是这个原因。
- 必须给
body加padding-bottom（比如56px），确保内容天然避开悬浮区域 - 若支持 iPhone 底部 Home Indicator，
padding-bottom要写成calc(56px + env(safe-area-inset-bottom)) - 低版本 Safari（15.4 之前）不支持
calc()混用env()，可降级写两行：padding-bottom: 56px;和padding-bottom: calc(56px + env(safe-area-inset-bottom));（后者覆盖前者）
position: fixed 的定位三件套不能少
只设 bottom: 0 不够，浏览器默认按左上角定位；不加 left: 0 和 right: 0，缩放或横屏时可能右侧留白或溢出。
- 必须同时声明：
position: fixed;、bottom: 0;、left: 0;、right: 0; - 高度用固定值（如
height: 56px），别用100vh或百分比——Safari 地址栏收放时视口高度跳变，会导致悬浮条上下抖动 -
z-index: 999足够，设成99999容易和弹窗、modal 层级冲突
移动端键盘弹出时悬浮条错位怎么防
iOS Safari 软键盘弹出会压缩视口高度，fixed 元素常被顶到半空，甚至盖住输入框。这不是 JS 能“阻止”的，而是要响应式隐藏。
立即学习“前端免费学习笔记（深入）”；
- 监听
input和textarea的focus事件，获焦时用element.style.display = 'none'临时隐藏 -
blur后延时300ms再恢复显示，避免焦点快速切换导致闪烁 - 不要在悬浮条内部放
<input>或<textarea>——iOS 键盘行为不可控，极易引发定位退化
关闭按钮和动画容易踩的坑
直接 display: none 会让关闭效果像“闪一下”，用户感知差；而重复绑定事件或热区太小，会导致点击没反应或关两次才生效。
- 关闭动画用
transform: translateY(100%)+opacity: 0，配transition: all 0.3s ease-out，JS 只负责加.closed类 - 按钮
type必须是button，否则在<form>内会默认提交 - 移动端热区至少
44×44px，加touch-action: manipulation消除 300ms 延迟
真正麻烦的不是写几行 CSS，而是不同机型对 fixed 的实现差异：iOS Safari 地址栏动态收放、微信 WebView 的 viewport-fit 支持不全、安卓某些定制 ROM 对 visualViewport 的监听失灵……这些没法靠一次写死解决，得靠真实设备交叉验证。
