不能用position: absolute做底部悬浮条，因为它相对于最近已定位祖先定位，页面结构变动、父级加transform或滚动时易错位消失；必须用position: fixed并配齐bottom: 0、left: 0、right: 0及合理z-index才能稳定锚定视口底部。
为什么不能用 position: absolute 做底部悬浮条
它会相对于最近的已定位祖先（比如某个 div 加了 position: relative），一旦页面结构变动或父级加了 transform，悬浮条就“飘”到别处甚至消失；滚动时也完全不可见。真正锚定视口底部的，只有 position: fixed。
position: fixed 底部悬浮条必须写的三件套
缺一不可，否则在 Safari、旧版 Chrome 或缩放后容易错位或被遮挡：
-
position: fixed—— 脱离文档流，锚定视口 -
bottom: 0—— 紧贴视口底边（不是页面内容尾部） -
left: 0; right: 0—— 横向铺满，避免只写width: 100%导致窄屏下溢出
别漏掉 z-index: 999，但别堆到 99999；太高会和弹窗、广告层冲突。
关闭按钮怎么嵌、状态怎么管
关闭不是简单 display: none 就完事。常见翻车点：
立即学习“前端免费学习笔记（深入）”；
- 用户快速点击多次，可能生成多个悬浮条实例 → 用全局标志位检查：
if (!window.bottomBarInstance) { createBar(); window.bottomBarInstance = true; } - 关闭后再次 show，事件监听器没重绑 → 推荐用
display: none隐藏，而非remove()；销毁时务必手动element.removeEventListener('click', handler) - 关闭按钮本身要语义化：
<button type="button" aria-label="关闭通知条">✕</button>，不用<div>+ onclick - iOS Safari 键盘弹出时，
fixed条可能上移遮挡输入框 → 给body加padding-bottom: 56px（等于条高度），留出安全区
移动端适配和易忽略的坑
最常被跳过的其实是视觉与交互一致性：
- 按钮热区必须 ≥ 44×44px：即使图标小，整个
button也要设min-height: 44px、padding: 8px 12px，并加touch-action: manipulation - iOS 地址栏收放时，
bottom: 0会跳动 → 不要用vh单位控制高度，固定值如height: 56px更稳 - 如果页面内容高度不足一屏，Safari 可能让
fixed条“粘滞”消失 → 给body加min-height: 100vh - 关闭按钮图标建议用 SVG 或 Unicode，别用字体图标（如 Font Awesome），某些系统字体缺失时显示为方块
真正难的不是定位，是每次关闭/重显后 DOM 状态是否干净、事件是否残留、无障碍属性是否始终有效——这些不验，上线后就是偶发 bug 的温床。
