左右对联广告需用 position: fixed 定位，通过 inset-inline-start/end 实现 RTL 兼容，共享 JS 状态与 class 控制显隐，并用 CSS 自定义属性统一适配多端边界条件。
左右对联广告能稳定吸附在页面两侧、随滚动保持可见，但“联动”不是指两块广告互相通信，而是指它们行为一致（比如同时显示/隐藏、同步悬停反馈、共用开关逻辑），且视觉上构成一对。关键不在 JavaScript 通信，而在 DOM 结构复用 + CSS 定位统一 + JS 控制逻辑共享。
用 position: fixed 实现基础悬浮定位
必须用 position: fixed，而不是 absolute 或 sticky。前者脱离文档流、基于视口定位，滚动时不会偏移；后两者依赖父容器或文档位置，极易错位。
-
left: 0+top: 50%+transform: translateY(-50%)实现左侧垂直居中 -
right: 0+top: 50%+transform: translateY(-50%)实现右侧垂直居中 - 必须设
z-index（如z-index: 1000），否则可能被轮播图、弹窗等遮盖 - 避免用
margin-top或top: 200px硬编码偏移，会导致不同屏幕高度下错位
用同一份 JS 控制两个广告的显隐与状态
不要为左、右广告分别写两套 show()/hide() 函数。定义一个统一状态变量，再通过 class 切换批量控制：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给两个广告容器都加上公共 class，例如
class="ad-banner ad-banner--left"和class="ad-banner ad-banner--right" - 用
document.querySelectorAll('.ad-banner')一次性获取全部对联节点 - 点击关闭按钮时，遍历所有
.ad-banner并添加is-hiddenclass，CSS 中用.ad-banner.is-hidden { display: none; }隐藏 - 若需记忆用户偏好（如关闭后 24 小时不再显示），只存一次
localStorage.setItem('adClosed', 'true')，而非分别存 left/right
注意 RTL 页面下的方向兼容问题
如果网站支持阿拉伯语、希伯来语等从右向左（RTL）语言，dir="rtl" 会反转 left/right 的含义——此时 left: 0 实际出现在右侧。不能靠 JS 检测 document.dir 后动态改 style，而应直接用逻辑属性：
- CSS 中改用
inset-inline-start: 0替代left: 0（对应 LTR 的左 / RTL 的右） - 用
inset-inline-end: 0替代right: 0（对应 LTR 的右 / RTL 的左） - 确保 HTML 根元素有
dir="ltr"或dir="rtl"，否则inset-inline-*不生效 - 旧浏览器（IE、旧版 Safari）不支持
inset-inline-*，需回退到媒体查询 +[dir="rtl"] .ad-banner--left { right: 0; left: auto; }
真正难的不是让两个 div 贴边，而是让它们在缩放、横屏、高 DPR 屏幕、RTL 切换、用户禁用 JS 等各种边界条件下依然稳定不跳动。建议把定位逻辑全收进 CSS 自定义属性（如 --ad-offset: 16px），JS 只管开关和状态同步，样式层负责适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
