position: fixed 是默认首选，因其锚定视口、不依赖父容器、兼容性好、性能优；但需手动避让内容、设置 z-index、处理 ios 跳变及移动端适配，sticky 和 absolute 仅适用于特定局部场景。
直接用 position: fixed 是最可靠、最可控的方式，其他方案（如 sticky 或 absolute）只在特定场景下成立，选错会导致广告“消失”“错位”或“不跟随”。
为什么 fixed 是默认首选
position: fixed 锚定视口，不依赖父容器结构，滚动时始终可见，适配绝大多数浮动广告需求（右下角、侧边栏、对联式）。它不关心你页面是不是 flex 布局、有没有 overflow 隐藏、祖先元素有没有 relative —— 只要浏览器支持，它就生效。
- IE 9+ 全面支持，现代浏览器无兼容问题
- 无需设置父容器样式，避免
sticky因父级overflow: hidden失效、或absolute因漏设position: relative锚定到 - 配合
right/bottom直接控制坐标，语义清晰，调试直观 - 性能开销极低，不触发重排，比 JS 监听 scroll 更轻量
fixed 广告必须手动避让内容
它脱离文档流，后面的内容会“上移”，盖住或挤乱布局。常见错误是只写 right: 20px; bottom: 20px; 却没给主体留空。
- 若广告在右下角，给主内容区域加
padding-right: 320px（广告宽 + 间距），或padding-bottom: 100px（广告高 + 间距） - 如果页面已有
position: fixed的底部导航栏（比如高 64px），广告的bottom应设为calc(20px + 64px)，而非硬编码20px -
z-index必须显式设置，建议从1000起，避免被弹窗、菜单等覆盖；但别用9999这类魔数，后续层级难维护
移动端和 iOS 的隐藏陷阱
fixed 元素在 iOS Safari 中可能因地址栏自动隐藏/显示导致位置跳变，尤其带关闭功能的广告。
- 关闭广告后，立即执行
window.scrollTo(0, window.scrollY)，强制重置视口锚点 - 广告层必须有明确背景色，比如
background: rgba(255, 255, 255, 0.92)，否则点击会穿透到底层按钮 - 小屏下用媒体查询收窄尺寸：
@media (max-width: 768px) { .ad-banner { width: 240px; right: 10px; bottom: 10px; } } - 不要用
float——position: fixed下float被规范强制设为none，写了也无效
sticky 和 absolute 什么时候能用
position: sticky 只适合广告需“进入某区块才固定”的场景，比如文章页内某个段落下方的推荐位；position: absolute 只适合模块内部局部悬浮，比如卡片右上角的“新标”。
-
sticky必须配合可滚动父容器（max-height+overflow-y: auto），且top/bottom是相对于该容器，不是视口 -
absolute必须确保最近已定位祖先（position: relative/absolute/fixed）存在，否则会锚定到，失去模块隔离性 - 两者都不适用于全局右下角悬浮——这是
fixed的专属场景
真正难的不是写哪行 CSS，而是想清楚这个广告该“跟谁走”：是跟整个视口（fixed）、跟某个滚动区块（sticky）、还是跟某块局部内容（absolute）。一旦定位方式选错，后面所有 margin、padding、z-index 都是在补漏洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
