用position: fixed是底部悬浮条首选，因其脱离文档流、始终相对视口定位；需重点处理滚动穿透、z-index层级冲突及移动端适配三大卡点，避免父容器transform等导致定位偏移。
底部悬浮条用 position: fixed 最直接可靠，但必须处理好滚动穿透、z-index 层级、移动端适配这三处实际卡点。
为什么 position: fixed 是首选
它让元素脱离文档流，始终相对于视口定位，不随页面滚动偏移。相比 absolute（依赖最近已定位父容器）或 sticky（需配合滚动容器），fixed 行为最可预测，尤其适合全页底部锚定。
- 必须显式设置
bottom: 0和left: 0（或right: 0），仅设bottom不足以防止水平偏移 - 若父容器有
transform、perspective或filter，会创建新的 containing block，导致fixed相对它定位而非视口——这是隐藏极深的坑 - 避免在
body上设overflow: hidden，否则可能意外裁剪固定元素
z-index 冲突常见表现与解法
底部悬浮条被轮播图、弹窗、广告位盖住，90% 是 z-index 值不够或层级链断裂。不是简单调高数字就能解决。
- 检查悬浮条父容器是否无意中设置了
z-index（哪怕值为0），这会创建新层叠上下文，把子元素锁死在该上下文中 - 确保悬浮条自身有明确
z-index，且大于所有可能遮挡它的兄弟元素（如.header、.modal） - 若页面用 Web Components 或 Shadow DOM，
fixed元素默认无法突破 Shadow Boundary，需将其挂到document.body直接子节点
移动端 Safari 的 hover 延迟与点击穿透
iOS Safari 对 :hover 有约 300ms 延迟，且首次点击会触发伪 hover 状态；更麻烦的是，固定条可能拦截下方可点击区域，造成“点不中”。
立即学习“前端免费学习笔记（深入）”；
- 禁用
pointer-events: none时要格外小心：如果悬浮条含按钮，设为none会让按钮失效；只对非交互区域设 - 用
touch-action: manipulation加速点击响应，减少延迟感 - 若悬浮条高度较大（如 >60px），在小屏上可能遮挡内容，建议用媒体查询收缩高度或改用折叠式设计
真正难的不是让条“贴到底部”，而是它在各种滚动状态、缩放比例、第三方脚本注入后仍保持稳定位置和可交互性。多测几个真机，特别是 iOS 17+ 和 Android Chrome 120+ 的边缘 case。
