fixed广告遮挡正文是因为脱离文档流导致布局无预留空间，必须配合padding/margin避让、z-index合理设置及动态避障逻辑。
浮动广告遮挡正文，本质是 fixed 定位脱离文档流 + z-index 层级失控 + 缺乏边界避让逻辑。不改定位方式、不加空间预留、不设交互约束，光调 z-index 或 opacity 都是治标。
为什么 fixed 广告会盖住正文？
因为 position: fixed 让元素完全脱离文档流，浏览器不再为它预留空间，后续内容“看不见”它的存在，直接从视口顶部/左侧开始排布。哪怕你设了 z-index: 999，正文文字照样被压在底下——不是层级不够高，是它根本没参与布局计算。
常见现象包括：移动端点不到底部按钮、表单 submit 按钮被遮、阅读滚动时突然卡住、SEO 抓取时忽略主内容区域。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有
fixed广告必须搭配对应方向的padding或margin补偿（比如右浮窗 → 给<body>加padding-right） - 避免在
<main>、<article>或关键表单外层直接用top: 0/bottom: 0—— 这等于主动宣告“我要覆盖你” - 用
getBoundingClientRect()在 JS 中实时检测广告是否与目标元素重叠，重叠时自动display: none或移位
移动端右上角悬浮窗怎么不挡返回键和输入框？
小屏下右上角 20px × 20px 的关闭按钮，手指一划就误触；键盘弹起后，fixed 元素常卡在输入框正上方，用户根本看不到自己打的字。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃右上角，改用
bottom: 10px; left: 50%; transform: translateX(-50%)居中底栏式布局，关闭按钮放左侧，留出右侧操作区 - 监听
focusin事件，一旦input或textarea获得焦点，立即执行document.getElementById('ad-banner').style.display = 'none' - 用
touch-action: manipulation防止 300ms 延迟导致“点两下才关”，同时加pointer-events: auto确保关闭按钮可点
如何让广告自动避开 H1、导航栏、提交按钮这些关键区块？
硬编码 top: 80px 只能应付一种模板；真实页面结构千变万化，广告必须“感知”周围内容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 定义关键选择器列表：
['header', 'nav', '.main-header', 'h1', 'button[type="submit"]', '.cta-button'] - 在
DOMContentLoaded后遍历这些元素，用el.getBoundingClientRect()获取它们在视口内的位置 - 若广告的
top值落在任一关键元素的top ± 20px范围内，就动态设top: (关键元素.bottom + 10) + 'px' - 把该逻辑封装进
throttle函数，滚动时每 100ms 最多执行一次，防卡顿
iframe 广告怎么防止遮挡？CSS 和 JS 都失效了
如果广告来自第三方 <iframe src="https://ads.example.com/widget">，你的 CSS 无法穿透同源策略，JS 更是完全不可访问其内部 DOM。此时遮挡问题只能从容器层解决。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给 iframe 外层容器加
pointer-events: none，再在其内部叠加一个透明<div>盖住关键操作区（如 submit 按钮上方），该div设pointer-events: auto拦截点击 - 用
IntersectionObserver监听 iframe 是否进入视口中心 300px 范围，进入即触发container.style.opacity = '0.8'降权显示 - 服务器端 Nginx 配置拦截广告域名（如
location ^~ /widget { return 404; }），比前端补丁更彻底
最易被忽略的一点：很多模板把广告 <div> 直接插在 <body> 开头，导致它在 DOM 树里位于所有内容之前。即使视觉上它在右下角，其 DOM 顺序仍可能干扰屏幕阅读器或 SEO 解析。务必确保广告节点插入在 </main> 之后、</body> 之前，并加 aria-hidden="true" role="presentation"。
