悬浮菜单必须用position: fixed且直接挂载body下，避免父级transform/filter/will-change创建层叠上下文导致z-index失效、点击穿透或定位偏移；按钮须为原生<button>并配aria-label，移动端需加touch-action: manipulation和env(safe-area-inset-bottom)适配。
悬浮菜单容器必须用 position: fixed，不能套在 transform 容器里
很多按钮点不中、hover 失效，根本不是 CSS 写错了，而是父级元素加了 transform、filter 或 will-change——这些属性会创建新的层叠上下文，把子级的 position: fixed 按钮“锁死”在局部层级里，导致 z-index 失效、点击穿透或定位偏移。
正确做法是：悬浮菜单节点直接挂载在 <body> 下，绕过所有布局容器。如果必须嵌套，检查父级是否触发了新层叠上下文（Chrome DevTools 的 Layers 面板能直观看到）。
- 用
getComputedStyle(el).transform !== "none"快速检测父级是否有 transform - 移动端尤其要注意：iOS Safari 对
transform+fixed组合更敏感，容易丢失 pointer-events - 不要依赖
z-index: 9999硬堆，要确认按钮所在层叠上下文本身是顶层
按钮必须用 <button> 元素，且带 aria-label
用 <div onclick="..."> 或 <span role="button"> 实现的“按钮”，在键盘 Tab 导航中会被跳过，屏幕阅读器无法识别语义，也无法响应空格/回车触发——这违反 WCAG 2.1 基本可访问性要求。
快捷操作按钮哪怕只有一行图标，也必须是原生 <button>，并配明确的 aria-label：
立即学习“前端免费学习笔记（深入）”；
<button aria-label="刷新当前页面" onclick="location.reload()"> <svg width="16" height="16"><path d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/></svg> </button>
- 禁止用
title替代aria-label，title 不被所有读屏器支持，且无焦点时不可见 - 如果按钮文字可见（如“返回顶部”），仍建议保留
aria-label，避免因 CSS 隐藏导致语义丢失 - 多个相同功能按钮（如多个“复制链接”）需用唯一 ID 关联
aria-labelledby，否则读屏器会重复播报
悬停展开菜单时，pointer-events 和 tabindex 必须同步控制
常见错误是只用 :hover .submenu { opacity: 1; } 控制显示，但没处理焦点流和点击穿透：鼠标划过就展开，手一抖点错；或者菜单展开后，背景内容仍可被点击。
正确逻辑是分离 hover 视觉反馈与交互触发：
- 用
opacity或transform: scale()做悬停动画，不改width/height/padding，避免 hit area 跳变 - 菜单本身设
pointer-events: none，只在:focus-within或.is-open类激活时设为auto - 主按钮加
tabindex="0"，菜单项用tabindex="-1"动态管理焦点顺序 - 点击外部关闭菜单时，用
event.target.closest(".floating-menu") === null判断，而非简单监听document.click
移动端必须加 touch-action: manipulation 和安全区适配
iOS Safari 默认对 position: fixed 元素添加约 300ms 点击延迟，且在刘海屏/挖孔屏下可能被底部安全区遮挡——这两个问题不加对应声明就会让用户觉得“按钮卡顿”或“点不到”。
关键样式必须写全：
.floating-menu-btn {
position: fixed;
bottom: 20px;
right: 20px;
touch-action: manipulation;
padding-bottom: env(safe-area-inset-bottom);
}
-
touch-action: manipulation是 iOS 和安卓 Chrome 的通用解法，禁用双指缩放等手势，换取即时点击响应 -
env(safe-area-inset-bottom)只在支持安全区的设备生效，老设备自动 fallback，无需 JS 判断 - 别用
min-height: 48px强制尺寸，移动端应优先保证可触控 hit area ≥ 44×44pt（iOS）或 48×48dp（Android）
真正难的不是让按钮“浮起来”，而是让它在各种滚动、缩放、焦点切换、读屏播报、触摸延迟场景下都稳稳响应——这些细节一旦漏掉，用户第一反应不是“功能没做”，而是“这个网站很卡”或“我点错了”。
