左侧对联广告采用 position: fixed 实现左右悬浮，通过 left: 0/right: 0 与 transform: translateY(-50%) 垂直居中，需设固定宽高、object-fit 和 cursor:pointer，并慎用于移动端，避免祖先元素 transform 等导致定位异常。
左侧对联广告不是靠“对联”语义实现的，而是用 CSS 定位 + 固定层叠（position: fixed）把两个窄条状广告块分别钉在视口左/右边缘——所谓“对联”，只是视觉类比，技术上就是两个 div 悬浮元素。
用 position: fixed 实现左右悬浮广告位
这是最直接、兼容性最好（IE8+）、不依赖 JS 的方案。关键不是“对联”，而是控制两个广告容器始终贴住视口左右边沿，并随滚动保持位置不变。
-
left: 0+top: 50%+transform: translateY(-50%)可让左联垂直居中；右联同理用right: 0 - 必须设
width和height，否则内容撑不开，尤其广告图常带max-width: 100%导致缩成一条线 - 避免遮挡正文：给
body左右加padding或用z-index控制层级，确保广告不盖住关键按钮或表单 - 移动端慎用：小屏下左右广告会严重挤压内容区，建议用媒体查询
@media (max-width: 768px)直接display: none
为什么不用 float 或 absolute
float 会让元素脱离文档流但依然受父容器宽度限制，无法真正“贴边到底”；absolute 依赖最近的定位祖先，一旦页面结构嵌套深或动态插入内容，很容易偏移甚至消失。而 fixed 始终相对于视口，稳定可靠。
- 若父容器设置了
transform、perspective或filter，会意外创建新的 containing block，使fixed元素转为相对该容器定位——这是个经典坑，排查时先检查祖先元素有无这些 CSS 属性 -
absolute在某些 CMS 或 SPA 路由切换后可能因 DOM 重绘错位，fixed则完全不受影响
图片尺寸与点击热区要手动配平
左侧广告常是竖版图（如 120×600），但实际加载后若没约束，可能被拉伸、裁剪或留白。光靠 img { width: 100%; height: auto; } 不够。
立即学习“前端免费学习笔记（深入）”；
- 给广告
div设固定宽高（如width: 120px; height: 600px;），再用img { object-fit: contain; }保证完整显示且不畸变 - 外层
div必须设cursor: pointer，否则用户看不出可点；同时绑定onclick或用<a href="..."><img alt="HTML网页广告怎么做左侧对联展示" ></a>，别只放图不包链接 - 广告需支持关闭：加一个
<span class="close-btn">×</span>，用 JS 控制display: none，并 localStorage 记录用户选择，避免重复打扰
真正难的不是写出来，而是让左右两个广告在各种屏幕、各种滚动深度、各种第三方脚本干扰下都稳如钉子——fixed 是起点，但 transform 触发新 containing block、iOS Safari 的 viewport 缩放抖动、广告平台异步注入导致的重排，这些才是上线后半夜被叫醒的原因。
