position: fixed 能实现真正的悬浮效果，因其始终相对于视口定位且不随滚动移动；而 position: absolute 依赖最近已定位祖先，滚动时会随之位移，无法稳定悬浮。
用 position: fixed 是构建自适应悬浮工具栏最直接、最可靠的方式，它不依赖 JS 监听滚动，也不受父容器 overflow 影响，唯一需要关注的是定位基准、层级冲突和响应式偏移控制。
为什么不能用 position: absolute 实现真正的“悬浮”
很多人试过把工具栏设成 position: absolute，结果一滚动就消失或错位——这是因为 absolute 是相对最近的「已定位祖先」定位，不是视口。如果父容器没设 position: relative 或 position: sticky，它就会往上一直找，最终锚定到 <body> 或 <html>，但滚动时仍会随文档流移动（除非祖先本身是 fixed）。
-
absolute适合局部浮动图层（如按钮旁的快捷操作弹层），不适合全局悬浮工具栏 - 若硬要用
absolute模拟固定效果，必须给<html>或<body>加position: relative，但这会干扰其他定位逻辑，不推荐 - 移动端键盘弹出时，
absolute元素常被挤出可视区；fixed则能稳定留在视口内
fixed 工具栏的定位与避让关键参数
单纯写 position: fixed 不够，必须显式声明 top/bottom + left/right，否则浏览器按默认流位置渲染，可能重叠或偏移。
- 右下角悬浮：用
right: 24px+bottom: 24px，不用百分比——小屏下right: 5%可能贴边甚至溢出 - 顶部悬浮导航：
top: 0+left: 0+width: 100%，但必须给<body>加padding-top: 60px（等于导航高度），否则首屏内容会被遮挡 - 避免被第三方 SDK 覆盖：
z-index至少设为999；若页面用了z-index: 2147483647的弹窗库，你得设更高或协商统一层级体系 - 不要在
fixed元素上加transform（如scale(0.95)），Chrome 115+ 会直接禁用fixed行为
响应式断点下的宽度与可见性控制
工具栏在小屏上不能简单缩放，而要重新组织结构或隐藏非核心项——fixed 元素不参与文档流，所以媒体查询必须直接作用于它自身，不能靠父容器传递。
立即学习“前端免费学习笔记（深入）”；
- 移动端建议改用
bottom: 0+width: 100%+justify-content: space-around的横向紧凑布局，而非右下角堆叠 - 用
display: none隐藏次要按钮时，注意 Safari 在某些 iOS 版本中对fixed+display: none切换有渲染延迟，可改用visibility: hidden+opacity: 0+pointer-events: none - 如果工具栏包含输入框（如搜索），务必加
min-width: 0和flex: 1（在 flex 布局中），否则在窄屏下会撑破容器或收缩为 0 - 避免用
vw单位做 padding/margin——iOS Safari 在横屏切换时不会实时重算，导致偏移错乱；优先用px、rem或calc()
真正难的不是写对 position: fixed，而是处理它和页面其他动态部分的协同：比如滚动锚点跳转后是否遮挡标题、键盘弹起时是否被顶出、深色模式下图标颜色是否自动适配。这些细节不写在 CSS 规则里，而藏在 DOM 结构顺序、scroll-margin-top 设置和系统偏好监听中。
