position: fixed 是唯一可靠方案，通过 top/right/bottom/left 组合实现四角定位，避免同时设 top 和 bottom；z-index 建议设为 1060 并确保 DOM 顺序合理；响应式需适配安全区域；触摸设备应禁用纯 :hover，改用 JS 监听事件并增强可访问性。
position: fixed + bottom/right/top/left 组合定位
浮动按钮要稳定停在视口四角，position: fixed 是唯一可靠方案。它让元素脱离文档流、以视口为参考系，滚动时位置不变。只设 top 和 left 会卡在左上角，但窄屏或缩放后可能被浏览器 UI 遮挡；更稳妥的是按目标角位选择组合：top+right（右上）、bottom+right（右下）、bottom+left（左下）、top+left（左上）。不要同时设 top 和 bottom，否则高度会被强制拉伸。
避免 z-index 冲突导致按钮不可见
悬浮按钮必须有足够高的堆叠层级，但不能无脑设成 9999。常见冲突点包括：导航栏用了 position: sticky 或 fixed、弹窗组件默认 z-index: 1050、某些 UI 框架的 modal 背景层设为 z-index: 1040。建议将按钮设为 z-index: 1060，并确保它在 DOM 中位于可能遮挡它的元素之后。若仍被盖住，用浏览器开发者工具检查 computed z-index 和包含块的 stacking context 是否意外截断了层级。
响应式下四角偏移值需动态适配
写死 bottom: 24px 在小屏手机上可能和虚拟导航键重叠，大屏又显得太远。纯 CSS 方案可用 @media 分段调整：@media (max-width: 480px) { .floating-btn { bottom: 12px; right: 12px; } }。但更健壮的做法是用 JS 检测安全区域：读取 document.documentElement.style.getPropertyValue('--safe-area-inset-bottom')（iOS Safari）或监听 resize 事件计算视口尺寸，再动态设置 style.bottom。尤其注意 Android 虚拟按键高度不固定，硬编码像素值极易失效。
伪类 hover 无法触发时的替代方案
在触摸设备上，:hover 不稳定——轻点可能不触发，长按又容易误判为“按住”。若提示框依赖悬停显示（如 tooltip），别只靠 .trigger:hover + .popup。应改用 JS 监听 mouseenter/focus（键盘可达）和 touchstart，并加防抖。同时给按钮加 aria-expanded 和 aria-controls 属性，确保屏幕阅读器能识别状态。另外，移动端点击区域至少 48×48px，padding 和 min-width/min-height 比单纯调 font-size 更可靠。
立即学习“前端免费学习笔记（深入）”；
