底部固定悬浮条必须用 position: fixed，因 absolute 依赖最近已定位祖先，遇 transform/perspective 等易错位飘走；fixed 锚定视口，滚动稳定，推荐 bottom: 24px、right: 24px、z-index: 999，并用语义化 button 标签确保可访问性与交互正常。
底部固定悬浮条的按钮必须用 position: fixed，否则滚动时会飘走
很多同学把悬浮条写成 position: absolute，结果一滚动页面，按钮就卡在半空或消失。这是因为 absolute 依赖最近的已定位祖先，而现代框架（比如 React Router 的 div[style="transform: ..."]）极易触发新的层叠上下文，让按钮“锚定”到错误容器。只有 fixed 才真正锚定视口，不管父级有没有 transform、will-change 或 perspective。
关键配置要写死：
-
bottom: 24px和right: 24px—— 别用0，iOS Safari 贴边会遮系统栏；也别用vw，解析不稳定 -
z-index: 999—— 太高（如999999）易和第三方弹窗冲突；太低（如10）会被主内容盖住 -
overflow: hidden必须加在按钮上 —— 否则波纹放大后会撑破圆角边界 - 按钮本身必须是
<button></button>元素，不是<div> + <code>onclick—— 否则键盘无法聚焦、屏幕阅读器不可见:active波纹不出现？先检查按钮是否具备可激活状态纯 CSS 的
:active只对原生可交互元素生效：<button></button>、<a href></a>、<input>。如果你用了<div class="btn">，哪怕加了 <code>tabindex="0"，在 iOS Safari 上仍可能因-webkit-tap-highlight-color遮盖导致波纹不可见。最稳解法就是直接用语义化
<button></button>，并补上移动端必要声明：-
-webkit-tap-highlight-color: transparent—— 关掉 iOS 点击灰框 -
touch-action: manipulation—— 消除 300ms 延迟 -
cursor: pointer—— 视觉提示可点击 - 别漏掉
aria-label，比如aria-label="提交反馈"
纯 CSS 波纹只能从中心炸开，真要落点定位得靠 JS 计算坐标
所有声称“纯 CSS 实现点击位置波纹”的教程，其实都在视觉上欺骗你：它把伪元素
::after的transform-origin设为center，再配合scale()动画，看起来像从中间炸开。但用户点在左下角，波纹还是从正中弹出 —— 这不是 bug，是纯 CSS 的硬限制：:active根本拿不到clientX/clientY。若需真实落点反馈，必须用 JS 监听
click或touchstart：- 用
e.touches?.[0]?.clientX替代e.clientX，真机触控才有效 - 通过
e.target.getBoundingClientRect()算出相对按钮左上角的偏移值 - 动态设两个 CSS 自定义属性：
--x和--y，让::after的left和top读取它们 - 每次点击前先
remove()已存在的波纹节点，避免多个动画叠加卡顿
移动端波纹失效或点不准，大概率是触摸热区没达标
WCAG 明确要求最小点击区域为
44×44px，但很多悬浮按钮只设了图标尺寸（比如24×24px），导致手指点中了却没触发。这不是 JS 绑定问题，是 CSS 触摸目标尺寸不足。正确做法是显式控制按钮物理尺寸：
- 设死
width: 56px; height: 56px;（留出 8px 内边距缓冲） - 用
display: flex; align-items: center; justify-content: center;居中图标 - 避免靠
font-size或padding推出大小 —— 字体渲染差异会让高度浮动 - 在窄屏下加大间距：
@media (max-width: 768px) { bottom: 80px; }，防止误触底部导航栏
真正容易被忽略的是：iOS Safari 在页面高度不足一屏时，
fixed按钮可能“粘滞”消失。给body加一句min-height: 100vh就能稳住锚点。 -
