fixed定位使按钮脱离文档流并固定于视口，需设至少两个偏移值，注意iOS键盘错位及safe-area适配，是实现全局悬浮按钮的唯一可靠方案。
fixed 定位让按钮脱离文档流并固定在视口坐标
position: fixed 是实现悬浮按钮最直接的方式。它让元素完全脱离普通文档流，以浏览器视口（viewport）为参考系定位，滚动页面时位置不变。注意：它的定位基准不是父容器，而是整个窗口，所以 top、right、bottom、left 都是相对于视口边缘计算的。
- 必须显式设置至少两个方向偏移（如
bottom和right），否则默认会落在 0,0（左上角）且可能被内容遮挡 - 如果父元素有
transform、perspective或filter，部分旧版 Chrome 会错误地将 fixed 元素相对该父级定位（已知 bug），需避免在祖先链上使用这些属性 - 在 iOS Safari 中，
fixed元素在软键盘弹出时可能错位，需监听focus/blur手动调整bottom
常见悬浮按钮布局组合（右下角为例）
右下角是最常用位置，兼顾可触达性与不干扰主内容。关键在于留出安全边距，并考虑移动端点击热区。
- 基础写法：
bottom: 20px+right: 20px，配合z-index: 100确保层级高于其他内容 - 避免遮挡底部导航栏：若页面有
position: fixed的 tabbar，需让按钮bottom值大于其高度（例如 tabbar 高 56px，则设bottom: 76px） - 适配刘海屏/全面屏：用
env(safe-area-inset-bottom)补齐底部安全距离，如bottom: calc(20px + env(safe-area-inset-bottom))
.fab {
position: fixed;
bottom: calc(20px + env(safe-area-inset-bottom));
right: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background-color: #007AFF;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 100;
cursor: pointer;
}fixed 按钮在滚动和缩放下的行为差异
fixed 元素在用户缩放页面（Ctrl+/- 或双指缩放）时仍保持像素级固定，但视觉大小会随缩放变化；滚动时绝对不动——这是它和 sticky 的本质区别。
- 缩放不影响定位坐标，但若按钮内含文字或图标字体，需确保
font-size使用px或rem（避免用vw导致过度放大） - 在 macOS Safari 中，启用“平滑滚动”时 fixed 元素偶尔出现渲染延迟，可加
will-change: transform缓解 - 不要给 fixed 按钮设
transform: translateZ(0)来强制硬件加速——这反而可能引发 iOS 上的闪烁或错位
替代方案对比：为什么不用 sticky 或 absolute
position: sticky 看似类似，但它依赖父容器高度和滚动范围，一旦父容器不够高或内容未溢出，它就永远不会“粘住”；absolute 则完全依赖最近的 position: relative/absolute/fixed 祖先，无法跨容器固定。
立即学习“前端免费学习笔记（深入）”；
- sticky 的触发需要父容器有明确高度，且元素必须在滚动范围内才生效，不适合全局悬浮场景
- absolute 在页面结构复杂时极易受嵌套层级影响，比如模态框、抽屉菜单展开后可能把按钮带偏
- fixed 是唯一能真正“悬浮于所有内容之上”的方案，只要注意 z-index 层级和安全区域即可
真正麻烦的是 iOS 键盘弹起时的 bottom 偏移重算，以及某些安卓 WebView 对 env(safe-area-inset-*) 的支持不一致——这两个点容易漏测。
