必须用 position: fixed。因为 absolute 会相对于最近已定位祖先定位，滚动时易消失或错位；fixed 才能真正悬浮于视口固定位置，且需设 z-index≥999 防遮挡。
悬浮按钮的定位方式选 position: fixed 还是 position: absolute
必须用 position: fixed。因为 absolute 会相对于最近的已定位祖先元素定位，页面滚动时按钮容易消失或错位；fixed 才能真正“悬浮”在视口固定位置，不随滚动偏移。
常见错误是忘记设 z-index，导致按钮被其他内容（如轮播图、弹窗）遮挡，建议设为 999 或更高。
href 指向主页的三种写法及适用场景
直接跳转首页有三个常用选择：
-
href="/"：最推荐，适用于所有部署路径（根目录或子目录），Nginx/Apache/Next.js/Vite 都能正确解析 -
href="index.html"：仅当首页明确叫index.html且部署在根目录时可用；若部署在子路径（如https://a.com/myapp/），会错误跳到https://a.com/index.html -
href="javascript:location.href='/'"：不推荐，绕过浏览器导航机制，影响可访问性和 SEO
按钮样式精简但防误触的关键参数
基础悬浮按钮不是越小越好，移动端拇指操作区域至少 44px × 44px，PC 端也建议最小宽高 40px：
- 用
width和height显式设定尺寸，避免仅靠内边距撑开 - 加
border-radius: 50%做圆形按钮时，确保width == height - 鼠标悬停反馈必须有，至少改
background-color或加transform: scale(1.05)，否则用户不确定是否可点 - 别省略
aria-label="返回主页"，对屏幕阅读器友好
插入位置和 DOM 顺序影响渲染与性能
按钮代码应放在 <body> 最末尾（</body> 前），而不是塞进页脚或头部容器里：
- 避免因父容器
overflow: hidden或transform导致按钮裁剪 - 减少重排（reflow）范围，提升首次渲染速度
- 如果用了框架（如 React/Vue），不要挂载到动态组件内部，而应挂到根容器外层或用 portal
<button onclick="location.href='/'" aria-label="返回主页" style="position:fixed;bottom:24px;right:24px;width:48px;height:48px;border-radius:50%;background:#007bff;color:white;z-index:999;box-shadow:0 2px 8px rgba(0,0,0,0.15);border:none;cursor:pointer;" >?</button>实际项目中容易忽略的是响应式断点处理——比如在小屏上把按钮从右下角移到左下角，或者隐藏文字图标只留符号，这些都需要配合媒体查询，不是加个
fixed 就一劳永逸。 
