必须用position: fixed，因为absolute依赖最近非static祖先，遇transform/filter等会降级定位导致偏移或消失，float不脱离文档流且无法锚定视口；fixed唯一真正相对于视口定位，滚动、缩放、modal弹出均不失效。
必须用 position: fixed，其他方式在真实场景中会失效。
为什么 position: absolute 不能用在右下角悬浮按钮上
它看似能设 right 和 bottom，但实际参照的是最近的非 static 祖先元素。一旦页面里有 Modal、Tab 切换、或任意父级加了 transform / filter / opacity: 0.99，按钮立刻“掉进”那个容器里——常见表现是 Modal 弹出后按钮上移、iOS Safari 中消失、Chrome 新标签页跳到左上角。
- 微信内置浏览器中，
absolute在WebView容器内常被截断，根本不出现在视口右下 -
float不脱离文档流，在 Flex/Grid 布局里直接失效，且无法锚定视口边缘 - 只有
fixed是唯一真正相对于视口定位的方案
right 和 bottom 的安全值怎么写
写死 right: 20px; bottom: 20px 在 iPhone X+、高缩放比、或安卓手势导航栏下极易被遮挡。需分层处理：
- 桌面端基础值建议用
right: 24px; bottom: 24px，留出视觉余量 - 移动端必须适配安全区：
bottom: calc(20px + env(safe-area-inset-bottom))，同时给加padding-bottom: env(safe-area-inset-bottom) - 缩放鲁棒性可选：
right: clamp(20px, 5vw, 40px)，避免小屏溢出或大屏太远 - 若页面已有固定底部导航栏（如高度 60px），
bottom至少设为80px，否则会被盖住
z-index 和点击失效的三个隐藏陷阱
图标显示异常或点不动，往往不是 JS 问题，而是 CSS 层叠逻辑错乱：
-
border-radius必须配合overflow: hidden使用，否则内部图标或阴影会溢出；要圆形就确保宽高等值 +border-radius: 50%，别用999px这类反模式 -
z-index不能省略，且需足够高——实测微信内需z-index: 2147483647；若父容器有transform或opacity ，会创建新层叠上下文，导致子元素 <code>z-index失效 - 第三方组件（如
<iframe></iframe>、<video></video>）默认覆盖fixed元素，需显式加pointer-events: auto，并确认其z-index高于这些元素
移动端热区和交互反馈最容易漏掉的细节
纯 CSS 实现时，触控友好性常被忽略：
- 视觉尺寸 40×40px 的图标，至少要用
padding: 12px或伪元素扩展热区（如::after { inset: -12px; }），达到 WCAG 推荐的 48×48px 最小触控区 - iOS 上
:active默认无效，必须加-webkit-tap-highlight-color: transparent - 务必加
touch-action: manipulation，否则滑动页面时可能卡顿；再配cursor: pointer; user-select: none防误选 - 微信内置浏览器中，DOM 必须等
DOMContentLoaded后插入，且第三方 SDK（如客服对话）要等wx.ready()
真正难的不是写出来，而是让按钮在各种缩放、安全区、层叠上下文、第三方组件共存的环境下稳定存在且可点——这些细节不补全，上线后就会在某个机型上突然失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
