用 fixed 定位实现右下角固定按钮需设 position: fixed、right 和 bottom 偏移量，配合足够高 z-index（如 1000+）避免遮挡，适配安全区域用 bottom: max(20px, env(safe-area-inset-bottom))，并可添加 transition 和 hover 动画提升体验。
用 fixed 定位实现右下角固定按钮，核心是让元素脱离文档流、相对于视口定位，并通过 right 和 bottom 控制偏移量。
基础写法：固定在视口右下角
只需给按钮设置 position: fixed，再指定距离右侧和底部的像素值即可：
-
position: fixed;—— 元素不再随页面滚动而移动 -
right: 20px;—— 距离浏览器窗口右边 20 像素 -
bottom: 20px;—— 距离浏览器窗口底边 20 像素
示例 CSS：
position: fixed;right: 20px;
bottom: 20px;
z-index: 1000;
注意 z-index 层级问题
右下角按钮常需覆盖其他内容（如弹窗、悬浮菜单），必须设置足够高的 z-index：
立即学习“前端免费学习笔记（深入）”；
- 一般建议设为
1000或更高，避免被遮挡 - 若页面已有全局 z-index 管理（如 Modal 用 9999），按钮至少设为
10000 - 确保父容器没设置
transform、filter等会创建新层叠上下文的属性，否则可能限制 z-index 生效范围
适配移动端与安全区域
在 iPhone X 及更新机型上，屏幕底部有“小黑条”，直接写死 bottom: 20px 可能导致按钮被遮挡：
- 改用
bottom: env(safe-area-inset-bottom)或constant(safe-area-inset-bottom)（旧版 iOS） - 推荐写法：
bottom: max(20px, env(safe-area-inset-bottom));，兼顾普通设备与安全区域 - 同时建议加
@supports检测，避免不支持的浏览器出错
可选增强：添加过渡动画与悬停效果
提升交互体验，可加入淡入/缩放或悬停反馈：
- 初始隐藏：加
opacity: 0; transform: scale(0.8); - 显示动画：配合
transition: all 0.3s ease; - 鼠标悬停时：
opacity: 1; transform: scale(1); - 也可用
:hover改变背景色、阴影等，增强点击提示
