position: fixed 是唯一可靠的基础方案，它使元素脱离文档流并锚定视口，滚动时位置不变；需设 right/top/bottom 和足够 z-index（≥1000），注意父级层叠上下文、iOS 视口 bug 及广告拦截器屏蔽问题。
用 position: fixed 是唯一可靠的基础方案
浏览器原生支持的固定定位就是靠 position: fixed，它让元素脱离文档流、锚定在视口（viewport）上，滚动时位置不变。其他方式（比如 position: absolute + 监听 scroll 手动重算）不仅性能差，还容易错位或抖动。
关键点只有三个：
-
right值决定离右边缘多远（如right: 20px） -
top或bottom决定垂直位置（如top: 150px或bottom: 30px） - 必须加
z-index（建议 ≥ 1000），否则可能被轮播图、弹窗等遮住
z-index 不生效？先检查父容器的 stacking context
即使写了 z-index: 9999，悬浮广告仍被盖住，大概率是父级元素触发了新的层叠上下文（stacking context）。常见诱因包括：opacity 小于 1、transform 非 none、filter、will-change，甚至 position: relative + z-index 都可能意外创建。
排查方法很简单：
立即学习“前端免费学习笔记（深入）”；
- 临时给悬浮广告加
outline: 2px solid red，确认它是否真的渲染在最外层 - 在浏览器开发者工具里逐级关闭父元素的 CSS 属性，看哪个一关就浮上来了
- 最保险的写法：把悬浮广告直接挂到
下，避开深层嵌套
移动端适配要防“缩放后错位”和“iOS Safari 视口 bug”
iOS Safari 在页面缩放或地址栏收起/展开时，会错误重算 fixed 元素的位置，导致悬浮广告突然偏移甚至消失。这不是你代码写错了，是浏览器 Bug。
应对策略不是硬扛，而是绕开：
- 避免用百分比做
right或top（如right: 2%），改用固定像素值（right: 16px） - 禁用用户缩放（
<meta name="viewport" content="user-scalable=no">），但注意这会影响可访问性 - 更稳妥的做法：监听
resize和scroll，用 JS 微调transform: translateZ(0)强制重绘（仅 iOS）
广告拦截器会直接干掉 position: fixed 右侧元素
BOBO、AdGuard、uBlock Origin 等主流拦截器，早就不靠关键词匹配了，而是直接识别 DOM 中 position: fixed + right / bottom 组合 + 小尺寸容器（如宽 display: none。
如果你发现广告在某些浏览器里完全不显示，别急着查 CSS，先关掉拦截插件试试。真要绕过，目前没有 100% 可靠的前端方案——所有“伪装 fixed”的技巧（比如用 position: absolute + window.onscroll 跟随）都会被更严的规则捕获，且影响性能。
真正该花时间的地方，是把广告内容做得足够相关、触发时机足够克制。否则，再稳的 position: fixed 也留不住用户注意力。
