position: fixed 能实现视口级固定定位，因其始终以浏览器窗口为参照系，不随滚动偏移；而 absolute 锚定最近已定位祖先，受其 overflow 影响会随内容滚动。
直接用 position: fixed 就能实现，不需要 JS 监听滚动或计算位置——这是最稳、最轻量的方案。
为什么不能用 position: absolute
很多人写完 position: absolute 发现一滚动广告就跟着跑，是因为它锚定的是「最近的已定位祖先」，不是浏览器视口。如果页面里有 overflow: hidden 的容器、CMS 自动插入的 wrapper，或者父级加了 position: relative，它立刻偏移。而 position: fixed 始终绑定视口坐标系，滚动、缩放、软键盘弹出（iOS 除外）都不影响定位精度。
position: fixed 必须配齐的三个 CSS 属性
只写 position: fixed 是不够的，漏掉任意一个都可能失效：
-
bottom: 0或top: 0—— 必须显式声明方向，top: auto不可靠 -
width: 100%（或具体值）—— 否则默认收缩为内容宽，右下角悬浮条会窄得看不见 -
z-index: 1000（或更高）—— 否则容易被position: relative的模态框、导航栏、第三方 SDK 覆盖
移动端 iOS Safari 的两个关键适配点
iOS Safari 在地址栏收起/展开、输入框聚焦时会重算视口高度，fixed 元素会短暂错位或“粘住不动”。这不是 bug，但必须处理：
立即学习“前端免费学习笔记（深入）”；
- 在
<head>加：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - CSS 中补安全区：
.ad-bar { padding-bottom: env(safe-area-inset-bottom); } - 不加
viewport-fit=cover，env(safe-area-inset-bottom)返回 0；Android Chrome 忽略该值，无副作用 - 别用 JS 动态改
bottom值去“修复”跳动——会引入滚动卡顿和竞态问题
主内容如何避让悬浮条不被遮挡
position: fixed 元素不占文档流，主内容会上移填补空缺，导致首屏文字被盖住。这不是 JS 能动态修好的，得靠 CSS 预留空间：
- 若悬浮条在底部：给
<body>或主容器加padding-bottom，值等于悬浮条高度（如padding-bottom: 80px） - 若悬浮条在右侧：给
<main>或内容区加padding-right: 280px（按悬浮条宽度定） - 避免用
margin-bottom代替padding-bottom，前者可能被折叠或受外边距合并影响
真正容易被忽略的，是父容器的 overflow: hidden 和 overflow: auto —— 它们会截断 fixed 元素，哪怕只在某个模块里加了，整个悬浮条都可能消失。检查 DOM 结构时，要一路向上看 body 到 html 是否有隐式或显式的 overflow 限制。
