对联广告是通过position: fixed定位在页面左右两侧的浮动层，需脱离文档流、设置z-index、独立封装可关闭结构，并在移动端禁用或替换为底部横幅。
网页对联广告本质是固定在左右两侧、随页面滚动始终可见的浮动层，不是用传统表格或 Flex 布局“摆”出来的，而是靠 position: fixed + 精确定位实现的。
用 position: fixed 定位左右两个广告容器
对联广告必须脱离文档流，否则会被内容推走或折叠。fixed 是唯一可靠选择（sticky 不支持左右边缘粘性，absolute 会随滚动消失）。
- 左联：设
left: 0，再用width和top控制尺寸与垂直位置 - 右联：设
right: 0，同理控制宽高和偏移 - 必须显式设置
z-index（建议 ≥ 1000），否则可能被轮播图、弹窗等遮盖 - 注意：若页面有横向滚动条，
right: 0会贴到视口最右，而非页面最右——多数场景这是预期行为
广告内容区域需独立封装并可关闭
每个对联广告应是一个带关闭按钮的独立 <div>，不能把图片直接塞进定位容器里——否则无法单独控制显示/隐藏、动画或事件。
<ul>
<li>结构示例：<pre class="brush:php;toolbar:false;"><div class="ad-banner ad-left">
<div class="ad-content">
<a href="..."><img src="..." alt="广告"></a>
<button class="ad-close">×</button>
</div>
</div></pre></li>
<li>
<code>.ad-close 绑定点击事件，隐藏父容器（推荐用 display: none 而非 visibility: hidden，避免占位）
localStorage，比如键名 ad_left_closed，下次加载时读取并跳过渲染适配移动端要主动禁用或切换形式
手机屏幕宽度小，左右各放一个 banner 会严重挤压内容，且触控误点率高。不能靠媒体查询“缩放”对联，而应直接隐藏或替换为底部横幅。
立即学习“前端免费学习笔记（深入）”；
- 在 CSS 中用
@media (max-width: 768px)将左右广告设为display: none - 如果业务强要求移动端也有广告，改用
position: fixed; bottom: 0; width: 100%的底部横幅更合理 - 避免用
touchstart模拟 click 关闭——iOS Safari 对 fixed 元素的 touch 事件有延迟，优先用click
真正难的不是写出来，而是让关闭逻辑和 localStorage 同步不翻车：用户点了关闭但刷新后又出现，大概率是没处理好存储时机（应在 DOM 更新后立即写入，而不是仅绑定事件），或者 key 名拼错、作用域跨了 iframe。
