position: fixed 是唯一能稳定实现首屏通栏广告双侧浮动挂件的方案，因 float 不脱离文档流、absolute 易被 overflow: hidden 裁剪，而 fixed 可精准锚定视口、配合 transform 和 z-index 实现稳定悬浮与避让。
position: fixed 是唯一能稳定实现首屏通栏广告双侧浮动挂件的方案，其他方式（如 sticky、absolute、float）在通栏场景下会失效或错位。
为什么不能用 float 或 absolute
float 在通栏广告中完全无效——它只影响文档流内元素的排列，而首屏通栏广告必须脱离文档流；absolute 则严重依赖最近的 position: relative 祖先，一旦页面结构嵌套深、或某层有 overflow: hidden，挂件就会消失或被裁剪。电商首页常见轮播图容器、商品网格都带 overflow: hidden，absolute 在这里极不可靠。
fixed 双侧挂件的坐标控制要点
左右两个挂件需分别锚定视口边缘，但不能简单写 left: 0 和 right: 0：
- 左侧挂件：用
left: 20px+top: 50%+transform: translateY(-50%)居中对齐首屏垂直中线，避免随内容高度变化偏移 - 右侧挂件：用
right: 20px+top: 50%+transform: translateY(-50%)，和左侧镜像一致 - 必须显式设
z-index: 1010（比主轮播z-index: 1000高，但低于弹窗z-index: 1100），否则会被轮播遮盖 - 加
transform: translateZ(0)触发硬件加速，防止 Safari 滚动时挂件抖动
首屏通栏下的避让与响应式陷阱
电商首页常有吸顶导航栏（position: fixed; height: 64px）和底部 TabBar（height: 56px），直接写 top: 0 会导致挂件被遮挡或压住关键操作区：
- 若挂件需避开吸顶导航，
top改为calc(64px + 20px)，而非硬编码84px - 小屏（
max-width: 768px）下应隐藏挂件，或改用bottom: 10px+top: auto转为底部悬浮，避免挤占窄屏空间 - 挂件本身必须设
background: rgba(255, 255, 255, 0.94)，否则 iOS 上点击会穿透到下方商品卡片，引发误跳转 - 关闭按钮触发后，务必执行
element.remove()（不是display: none），否则仍占内存且可能干扰后续z-index计算
真正难的不是写出 fixed 样式，而是判断挂件是否该随用户滚动行为动态调整 top 值（比如滑过吸顶栏后才出现），这需要监听 scroll 并结合 getBoundingClientRect()，但大多数电商首屏场景不需要——固定在首屏通栏区域，就是最稳、最省资源的做法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
