浮动按钮必须用 position: fixed 定位，因其需始终可见、不随滚动消失；absolute 会导致移出视口，尤其移动端失效；须设 z-index 防遮挡，ios 需加 transform: translatez(0) 和 padding/margin 修复点击偏移，同时补充 aria-label 和视觉隐藏文本以保障无障碍。
浮动按钮的定位必须用 fixed，不能用 absolute
浮动按钮（FAB）本质是“始终可见、不随页面滚动消失”的操作入口，所以 position: fixed 是唯一合理选择。用 position: absolute 会导致它随父容器滚动而移出视口，尤其在移动端极易失效。
常见错误是把 FAB 套在某个 div 里再设 absolute，结果一滚动就找不着了。正确做法是让它脱离文档流、锚定视口边缘：
<button class="fab">+</button>
<style>
.fab {
position: fixed;
bottom: 24px;
right: 24px;
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
background: #2196F3;
color: white;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
z-index: 1000;
}
</style>
- 务必设置
z-index，否则可能被其他元素（如 footer、modal）遮挡 - 移动端注意
bottom和right的值要留出安全距离，避免被虚拟导航栏或键盘顶起 - 不要依赖父容器尺寸做定位，fixed 就是相对于 viewport
点击穿透问题：iOS Safari 下按钮点不中
iOS Safari 对 fixed 元素有渲染延迟和点击区域偏移的已知问题，尤其当页面有 transform、overflow: hidden 或启用 viewport 缩放时，click 事件可能触发在旧位置。
最稳的解法是加两行 CSS 强制重绘并扩大热区：
.fab {
/* 触发硬件加速，修复 iOS fixed 定位抖动 */
transform: translateZ(0);
/* 扩大点击区域，但视觉不变 */
padding: 12px;
margin: -12px;
}
- 别只靠
cursor: pointer判断是否可点——它不解决底层坐标映射错位 - 如果按钮嵌在
iframe或 Webview 中，还需检查宿主环境是否禁用了pointer-events - 真机测试比模拟器更可靠，尤其是 iOS 16+ 的 scroll-chaining 行为
无障碍与语义：不能只用 button + icon
纯图标按钮对屏幕阅读器不可读，<button>+</button> 会被朗读成“加号按钮”，用户不知道功能意图。
必须用 ARIA 明确说明用途，并提供 fallback 文本（可视觉隐藏）：
<button class="fab" aria-label="新建任务">
<span class="visually-hidden">新建任务</span>
<svg viewbox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg></button>
<p><style>
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style></p>
-
aria-label优先级高于内部文本，但内部文本仍需存在（防 JS 失效或爬虫） - 避免用
title属性替代aria-label，它在触摸设备上不触发，且延迟高 - 如果按钮有状态（如加载中），记得同步更新
aria-busy和aria-disabled
响应式缩放：小屏别让 FAB 挡住内容
固定尺寸的 FAB 在小屏上容易遮挡关键信息，比如表单输入框或地图控件。不能只靠媒体查询改大小，得结合交互逻辑做降级。
推荐方案是：小屏下默认收起，点击展开菜单；或移动到左下角避开手势区域：
@media (max-width: 480px) {
.fab {
bottom: 80px; /* 留出键盘高度空间 */
right: 16px;
}
.fab.expanded {
/* 展开子菜单时提升 z-index */
z-index: 1001;
}
}
- 别用
display: none彻底隐藏——会破坏焦点管理，影响键盘用户 - 如果页面有多个 FAB（如主操作 + 快捷操作），小屏建议合并为一个下拉菜单，而非堆叠
- 安卓 Chrome 的“地址栏自动隐藏”行为会让
bottom: 24px实际位置跳变，用env(safe-area-inset-bottom)更稳妥
实际项目里最常被忽略的是点击穿透和无障碍支持——前者导致用户反复点却无反应，后者让功能对部分用户完全不可达。写完记得真机测三遍：横屏、竖屏、弹出软键盘后。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
