position: fixed 是唯一可靠选择。它稳定锚定视口，适配所有主流手机浏览器，需手动避开底部导航栏，置于 body 直接子级，并用 calc(16px + env(safe-area-inset-bottom)) 适配安全区域。
手机端悬浮按钮的定位方式选 position: fixed 还是 position: sticky？
position: fixed 是唯一可靠选择。position: sticky 在 iOS Safari 中对父容器高度、滚动上下文敏感，常失效；而 fixed 能稳定锚定视口，适配所有主流手机浏览器。注意它脱离文档流，不会影响页面原有布局，但需手动避开底部导航栏（如微信内置浏览器常有 44px 底部条）。
- 按钮应放在
直接子级，避免被局部transform或overflow: hidden的父容器裁剪 - 使用
bottom: 16px和right: 16px作为基础偏移，iOS 安全区域需额外处理 - 不要用
top: auto; bottom: 0代替具体数值，部分安卓 WebView 对auto解析异常
如何适配 iPhone X 及以上机型的安全区域？
直接用 env(safe-area-inset-bottom) 替代固定像素值。这个 CSS 环境变量在支持安全区域的设备（iOS 11+、Android 10+ 部分浏览器）中返回底部留白高度，不支持时自动 fallback 到 0。
.cart-float {
position: fixed;
bottom: calc(16px + env(safe-area-inset-bottom));
right: 16px;
}
- 必须写成
calc()表达式，不能直接bottom: env(safe-area-inset-bottom)，否则无 fallback - 不要依赖 JavaScript 动态计算安全区域，CSS 原生方案更轻量、无闪动
- 测试时务必在真机 Safari 打开，模拟器可能不触发该变量
点击区域太小导致误操作，怎么扩大热区又不撑大视觉按钮？
用 padding 扩展点击区域，再用 overflow: hidden 和负 margin 控制视觉大小。单纯放大按钮会破坏 UI 一致性，而只加 padding 又会让图标显得过小。
.cart-float {
padding: 24px;
margin: -8px;
overflow: hidden;
}
.cart-float::before {
content: "";
display: block;
width: 56px;
height: 56px;
background: #ff6700;
border-radius: 50%;
margin: 8px;
}
- 实际点击热区是 72×72px（24px padding × 2 + 56px 内容），符合 WCAG 44×44px 最小触控标准
-
margin: -8px抵消多出的 padding，保持外边距不变 - 避免用
transform: scale()扩大，会导致点击坐标偏移，尤其在快速连点时失准
Vue/React 项目里怎么避免重复渲染导致按钮闪动？
悬浮按钮必须脱离组件树的响应式更新链。常见错误是把它写在商品详情组件内部，每次 data 或 props 变化就重绘整个按钮（含动画、图标切换等）。
- 在 Vue 中用
createApp新建独立实例挂载到document.body，或使用Teleport到 body 下 - 在 React 中用
ReactDOM.createPortal渲染到document.body，且确保该组件无 props 依赖（或用useMemo缓存） - 按钮状态（如“已加入”提示）通过全局事件或 Zustand/Pinia 等状态管理同步，而非父子传值
安全区域兼容、热区尺寸、渲染隔离——这三个点漏掉任何一个，都会让按钮在某类机型或交互场景下突然失效。真机测试比任何文档都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
