使用fixed定位可创建不随页面滚动的悬浮按钮，通过设置bottom和right固定位置，结合border-radius、box-shadow等样式实现圆形悬浮效果，并可添加transition动画增强交互体验。
在CSS中制作悬浮按钮，通常使用 position 属性将按钮固定在视窗的某个位置，比如右下角，即使页面滚动，按钮也始终可见。下面是实现方法。
1. 使用 fixed 定位固定按钮位置
将按钮的定位设置为 fixed，可以让它相对于浏览器视窗固定位置，不随滚动而移动。
常用场景是将“返回顶部”或“联系客服”按钮悬浮在页面角落。
示例代码：<button class="floating-btn">↑</button>
关键点说明：
立即学习“前端免费学习笔记（深入）”；
- position: fixed;：让按钮脱离文档流并固定在视窗中
- bottom 和 right：控制按钮距离底部和右侧的距离
- border-radius: 50%：使按钮呈现圆形
- box-shadow：增加立体感，增强“悬浮”视觉效果
2. 可选：添加动画效果
为了让按钮更自然，可以加上淡入或轻微弹动效果。
CSS 动画示例：
.floating-btn {
opacity: 0.9;
transition: all 0.3s ease;
}
.floating-btn:hover {
transform: scale(1.1);
opacity: 1;
}
3. 适配移动端
在手机上，注意按钮不要遮挡内容，建议调整 bottom 和 right 的值，并测试不同屏幕尺寸下的显示效果。
基本上就这些，用 fixed 定位配合一些样式修饰，就能轻松做出一个美观实用的悬浮按钮。
