position: fixed 按钮被遮挡、点不中，90% 因父容器含 transform/filter/will-change 导致层叠上下文隔离，z-index 失效；须将其直接挂载在 下或用 createportal/teleport 提升至 document.body，配合 env(safe-area-inset-bottom) 和 box-shadow 实现安全、可访问、多层视觉效果。
position: fixed 必须挂载在
按钮被遮挡、点不中，90% 的原因是它被套在某个带 transform、filter 或 will-change 的父容器里。这些属性会触发新的层叠上下文（stacking context），导致 z-index 失效——哪怕你设了 z-index: 9999，也只在那个局部上下文里“最高”，不是全页面最高。
正确做法是把按钮节点直接写在 最外层，不嵌套任何布局组件：
<button class="floating-btn">+</button> <main>... 页面内容 ...</main>
- 不要放在
<div class="container"> 或 <code><section></section>里面 - React/Vue 项目中用
createPortal或Teleport挂到document.body是必须的 - 检查浏览器开发者工具的 Layers 面板，确认按钮是否处于顶层渲染层
多层色彩堆叠靠的是 box-shadow 而非多个 div
所谓“多层色彩”，不是真的叠加多个元素——那会破坏语义、增加 DOM 复杂度、引发 pointer-events 透传问题。真正高效且可访问的做法，是用单个 <button></button> + 多重 box-shadow 实现视觉堆叠效果：
.floating-btn {
position: fixed;
bottom: 20px;
right: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: #4CAF50;
box-shadow:
0 0 0 4px #fff,
0 0 0 8px #E0E0E0,
0 4px 12px rgba(0,0,0,0.15);
}
- 第一层：纯白描边（
4px），模拟高光内环 - 第二层：浅灰描边（
8px），形成中间过渡色带 - 第三层：标准阴影，提供立体感和空间分离
- 避免用
background-image或伪元素模拟多层——它们无法响应:hover状态变化，也不支持无障碍焦点
移动端 bottom 必须用 env(safe-area-inset-bottom)
iOS 键盘唤起时，bottom: 20px 会让按钮被顶出视口；地址栏收起/弹出也会触发意外位移。硬编码像素值在 Safari 上不可靠。
安全写法是：
.floating-btn {
bottom: calc(20px + env(safe-area-inset-bottom));
}
-
env(safe-area-inset-bottom)在非刘海屏或 Android 上返回0px，不影响表现 - 不要只写
bottom: env(...)——那样在无安全区设备上会贴底，失去呼吸感 - 搭配
touch-action: manipulation，禁用 iOS 300ms 点击延迟
悬停动画不能改变 hit area，否则用户点不中
很多“多彩悬浮”按钮用 transform: scale(1.1) 或 padding: 16px → 20px 做悬停反馈，结果鼠标划过瞬间 hit area 扩大，手一抖就点空——这不是动画慢，是交互逻辑错。
- 只允许改
opacity、background-color、box-shadow、transform: translateZ(0)这类不影响布局的属性 - 动画时长控制在
0.2s内，ease-out比ease更跟手 - 如果要做展开菜单，必须用
click触发，:hover只负责视觉过渡，且二级菜单需加pointer-events: none到遮罩层上
最易被忽略的一点：按钮必须是 <button></button> 元素，带 aria-label，且不能被 display: none 或 visibility: hidden 隐藏——要用 inert 或 aria-hidden="true" + tabindex="-1" 控制可访问性状态。
