悬浮按钮用 fixed 而非 absolute 是因 fixed 相对视口定位，滚动时始终固定右下角；absolute 受父容器包含块影响，遇 transform/perspective/filter 或 ConfigProvider 等框架封装易失效，且移动端 Safari 在 input 聚焦时存在兼容问题。
悬浮按钮定位为什么用 fixed 而不是 absolute
因为 fixed 是相对于视口定位，滚动时按钮始终固定在右下角；absolute 依赖父容器的定位上下文，一旦父元素有 transform、perspective 或 filter，就会触发新的包含块，导致按钮“粘”在父容器里，而不是屏幕角落。
常见踩坑点：
- 给
html或body加了transform: scale(1)—— 这也会创建包含块，让fixed失效 - 使用某些 UI 框架（如 Ant Design 的
ConfigProvider）内部包裹了带transform的节点，需检查 DOM 结构 - 移动端 Safari 对
fixed在input聚焦时有兼容问题，需配合viewport设置临时修复
按钮尺寸和 z-index 容易被遮挡的几个原因
右下角按钮常被 footer、弹窗、导航栏盖住，本质是层叠上下文（stacking context）干扰。不是简单调高 z-index 就能解决。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保按钮父容器（通常是
<div class="fab">）没有opacity、transform、filter等触发新层叠上下文的属性 -
z-index值设为9999不够——要高于页面中所有可能创建层叠上下文的组件，比如某些 modal 库默认用1000，建议设10000 - 按钮本身用
position: fixed，但不要套在position: relative的 wrapper 里，否则可能继承其层叠上下文
点击区域太小？别只改 width/height
移动端手指操作需要至少 44px × 44px 的可点击区域（苹果人机指南），但直接拉大按钮会破坏设计。更稳妥的做法是扩大点击热区，而非视觉区域。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
推荐写法：
<button class="fab-btn"></button>
<p>.fab-btn {
position: fixed;
bottom: 20px;
right: 20px;
width: 56px;
height: 56px;
/<em> 视觉尺寸 </em>/
padding: 0;
/<em> 热区扩展：用伪元素撑开点击范围 </em>/
}
.fab-btn::before {
content: "";
position: absolute;
top: -12px;
left: -12px;
right: -12px;
bottom: -12px;
}
这样视觉仍是 56px，但实际可点击区域达 80px × 80px，且不干扰布局流。
如何让悬浮按钮适配深色模式
不能只靠 @media (prefers-color-scheme: dark) 改背景色——按钮图标、阴影、边框都要同步响应，否则在深色背景下可能完全看不见或发虚。
关键点：
- 图标用
<svg>内联，并把fill设为currentColor，再通过color控制 - 避免用图片或 base64 图标，它们无法随系统主题切换
- 阴影用
box-shadow: 0 2px 8px rgba(0,0,0,0.15)而不是固定黑值，透明度比绝对颜色更安全 - 如果用了 CSS 变量（如
--fab-bg），记得在:root和@media (prefers-color-scheme: dark)里都定义
深色模式下最常被忽略的是 focus outline：浅色模式下的 outline: 2px solid #007bff 在深背景上几乎不可见，必须单独定义深色 focus 样式。
