移动端 fixed 按钮在键盘弹出时错位因浏览器重算视口未更新定位基准；推荐改用 absolute + 动态高度，或 fixed 配合 env(safe-area-inset-bottom) 及硬件加速优化。

移动端 fixed 按钮被键盘顶起或遮挡

iOS Safari 和部分安卓 WebView 下，position: fixed 元素在输入框聚焦、软键盘弹出时经常错位甚至消失——不是 CSS 写错了，是浏览器把视口高度重算后没更新 fixed 定位基准。

• 用 viewport 的 height=device-height 或 flexible 无济于事，现代浏览器已不响应这类设置
• 监听 resize 事件在 iOS 上不可靠（键盘弹出未必触发）
• 更稳的解法是改用 position: absolute + 动态计算父容器高度，但前提是按钮父级有明确 height 且为 relative
• 若必须用 fixed，可加 transform: translateZ(0) 强制硬件加速，缓解部分安卓机型渲染异常

bottom 值设多少才真正贴底

bottom: 0 看似合理，但在有地址栏/工具栏的移动浏览器里，页面实际可视区域会动态变化，bottom: 0 实际锚定的是「整个文档底部」，而非「当前可见区域底边」。

• iOS Safari 地址栏收起时，视口高度增加，fixed 元素会突然上移；展开时又下掉
• 推荐用 bottom: env(safe-area-inset-bottom)（需配合 viewport 设置 viewport-fit=cover），适配刘海屏和底部安全区
• 兼容老设备可 fallback 到 bottom: 16px（经验性留白），但需测试不同机型键盘高度差异

fixed 按钮点击穿透或失焦

某些安卓 WebView 中，fixed 元素可能无法响应点击，或点击后焦点丢失、键盘不弹出——常因层级（z-index）、合成层缺失或 touch 事件拦截导致。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 确保按钮有明确 z-index（如 z-index: 1000），且父容器未设 overflow: hidden 或 transform（会创建新 stacking context）
• 加 touch-action: manipulation 提升点击响应优先级
• 避免在按钮上直接绑定 ontouchstart，改用 addEventListener('click', ...)（移动端 click 有 300ms 延迟但更稳定）
• 若按钮内含 input，需确认其 position 未脱离文档流，否则 focus 位置计算异常

性能与滚动卡顿风险

position: fixed 按钮本身开销不大，但若伴随频繁 DOM 更新（如实时计数、状态切换）或复杂阴影/动画，容易触发强制同步布局（layout thrashing）。

• 避免在 scroll 事件中修改该按钮的 bottom 或 transform——移动端 scroll 触发频率高，直接写样式极易卡顿
• 用 will-change: transform 提前告知浏览器该元素将变化（仅限必要时，滥用反而伤性能）
• 阴影慎用 box-shadow，改用 filter: drop-shadow() 更利于 GPU 加速
• 若按钮需随滚动渐显/隐，优先用 IntersectionObserver 替代 scroll 监听

真正麻烦的不是怎么写 fixed，而是得时刻盯着它在不同机型、不同系统版本、不同键盘状态下是否还“钉”在该在的位置——尤其当页面本身有滚动、缩放、横竖屏切换时，bottom 值可能需要多套逻辑兜底。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！