position: fixed 是唯一能稳定实现两侧悬浮广告的定位方式；left 和 right 同时设在单个元素上会因浏览器优先采用 left 而忽略 right，故左右广告必须分属独立元素、直接挂载 body 下，避免父级 transform 干扰定位。
position: fixed 是唯一能稳定实现两侧悬浮广告的定位方式，其他方案在滚动、缩放或父容器加 transform 时都会失效。
为什么 left: 0 和 right: 0 同时用会出问题？
浏览器不支持同时声明 left 和 right 来撑满宽度——它只会按文档流顺序优先采用 left，right 被忽略。两侧悬浮窗必须各自独立定位，不能共用一个容器。
- 左侧悬浮窗必须单独写
left: 20px，右侧用right: 20px，二者互不影响 - 别把左右两个
div套进同一个position: relative父容器里——只要父级有transform或filter，fixed就会相对它定位，导致偏移 - 结构上直接挂到
下最稳妥：<div id="ad-left"></div> <div id="ad-right"></div>
移动端适配和 z-index 冲突怎么解？
两侧广告在小屏下容易挤占操作空间，且第三方 SDK（如美洽、快商通）常自带 z-index: 9999，一不留神就盖住你的悬浮窗。
- 用媒体查询单独控制移动端间距：
@media (max-width: 768px) { #ad-left, #ad-right { left: 10px; right: 10px; } } -
z-index只对已定位元素生效，且只在同层 stacking context 中比较；若父容器有z-index: 10，你设z-index: 999也没用——得确保它的祖先没创建更低的堆叠上下文 - 右侧广告建议用
z-index: 1001，左侧用z-index: 1000，避免和顶部导航栏（常见z-index: 100）或弹窗（z-index: 9999）冲突
iframe 广告隐藏不了？关键在跨域和加载时机
很多 HTML5 模板把广告封装在 <iframe src="https://ads.example.com/..."></iframe> 里，这时 CSS 隐藏无效，JS 也拿不到内容。
- 前端只能隐藏整个
iframe容器：#ad-right iframe { display: none !important; } - 但更推荐在 DOM 加载完成后用 JS 移除节点：
document.getElementById('ad-right').remove();，比innerHTML = ''更彻底 - 如果广告是异步注入（比如通过
<script async src="sdk.js"></script>），必须等DOMContentLoaded触发后再执行移除，否则节点还没生成 - 服务器端拦截是最干净的方案：Nginx 配置
location ~* /widget\?pos=right { return 404; }
真正麻烦的不是写两行 fixed 样式，而是父级悄悄加了 transform: translateZ(0) 却没人告诉你——检查“Computed”面板里的 position 和 offsetParent，比反复调参数管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
