悬浮按钮通过position: fixed和z-index实现，固定在视窗右下角且不被遮挡，配合响应式调整与aria-label提升可访问性，确保在不同设备上始终显眼可用。
悬浮按钮（Floating Action Button，简称FAB）常用于突出核心操作，比如“返回顶部”、“添加内容”或“联系客服”。通过 CSS 的 position: fixed 和 z-index，可以轻松实现按钮始终固定在视窗特定位置，并确保不被其他元素遮挡。以下是具体实现方法。
使用 position: fixed 定位悬浮按钮
position: fixed 能让元素脱离文档流，相对于浏览器视窗固定定位，即使页面滚动，元素位置也不会改变，非常适合做悬浮按钮。
例如，将按钮固定在右下角：
.fab {
position: fixed;
bottom: 20px;
right: 20px;
width: 56px;
height: 56px;
background-color: #007bff;
color: white;
border: none;
border-radius: 50%;
font-size: 24px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
cursor: pointer;
}
这样按钮就会一直停留在距离底部和右侧各20px的位置。
立即学习“前端免费学习笔记（深入）”；
利用 z-index 控制层级显示
当页面中有弹窗、导航栏或图片轮播等元素时，它们可能设置了较高的 z-index，导致悬浮按钮被遮挡。这时需要为按钮设置更高的 z-index 值来确保其“浮”在最上层。
例如：
.fab {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000; /* 高于大多数页面元素 */
/* 其他样式同上 */
}
常见层级建议：
- 普通内容：z-index 0–1
- 导航栏：z-index 100–500
- 模态框/弹窗：z-index 900–999
- 悬浮按钮：z-index 1000 左右较安全
响应式与可访问性优化
为了让悬浮按钮在不同设备上体验良好，可加入响应式调整。例如在小屏幕上略微缩小按钮或调整边距：
@media (max-width: 480px) {
.fab {
width: 48px;
height: 48px;
bottom: 16px;
right: 16px;
font-size: 20px;
}
}
同时建议添加 aria-label 提升可访问性：
<button class="fab" aria-label="回到顶部">↑</button>
基本上就这些。用好 position: fixed 和 z-index，再稍加美化和适配，就能做出一个实用又美观的悬浮按钮。不复杂但容易忽略细节。
