侧边浮动广告必须用position: fixed而非float，因为float专为文本环绕设计、依赖文档流，滚动时会错位或消失；fixed以视口为基准，配合right/top等定位值和z-index才能真正“钉”在屏幕边缘，确保始终可见且不遮挡内容。
侧边浮动广告为什么用 position: fixed 而不是 float
因为 float 是为文本环绕设计的，它依赖文档流，一旦页面滚动或内容变化，浮动元素容易错位、重叠甚至消失；而侧边广告必须“钉”在视口边缘，不随滚动偏移，position: fixed 才是唯一可靠选择。
常见错误现象：用 float: right 写完发现广告只在顶部出现、一滚动就不见，或者被其他 div 挤出屏幕——这基本就是误用了 float。
-
fixed定位以浏览器视口为基准，不受父容器限制 - 必须配合
top/right/bottom/left四个方向值之一才能生效 - 若父容器有
transform或perspective，会意外创建新的定位上下文，导致fixed失效（这是高发兼容性坑）
HTML 结构怎么写才安全又语义清晰
不要直接把广告塞进 <body> 最外层——这样既难维护，也破坏结构语义。推荐用独立容器包裹，并赋予明确含义：
- 用
<aside>标签（而非<div>），它天然表示“与主内容相关但可分离的附属内容”，对 SEO 和屏幕阅读器友好 - 加
aria-label="右侧QQ客服广告"属性，避免纯图标无文字时无障碍访问失败 - 避免内联样式，把样式抽到
<style>或外部 CSS 中，方便后续调整尺寸/颜色/动画
示例结构：
立即学习“前端免费学习笔记（深入）”；
<aside aria-label="右侧QQ客服广告">
<a href="https://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes" target="_blank">
<img src="qq-icon.png" alt="联系客服">
</a>
</aside>
关键 CSS 参数怎么设才不遮挡内容也不被遮挡
侧边广告最常被忽略的是 z-index 和尺寸边界。默认情况下，它可能盖住导航栏，也可能被轮播图、弹窗等更高层级元素压住。
-
right: 20px比right: 0更安全——留出 20px 边距，避免紧贴屏幕边缘导致 iOS Safari 滑动时误触 -
top: 50%+transform: translateY(-50%)实现垂直居中，比硬写top: 200px更适配不同屏幕高度 -
z-index: 1000是底线，企业项目中建议设为z-index: 2147483647（最大整数值），防止被第三方 SDK（如统计脚本、广告联盟 JS）意外覆盖 - 务必加
pointer-events: auto（显式声明），某些框架注入的全局样式会误设pointer-events: none导致点击失效
移动端适配和自动隐藏怎么做
桌面端侧边广告在手机上会严重挤压内容宽度，甚至挡住返回按钮。不能靠 JS 判断 UA，而应优先用媒体查询控制显示逻辑。
- 用
@media (max-width: 768px)直接display: none，比 JS 切换更轻量、更可靠 - 如果必须保留移动端入口，改用底部悬浮（
bottom: 20px+left: 50%+transform: translateX(-50%)），并缩小图标尺寸（width: 40px） - 避免监听
scroll事件来动态显示/隐藏——性能差且触发频繁，CSSposition: fixed本身已足够稳定
真正容易被忽略的点：广告链接的 href 必须是完整协议地址（如 https://wpa.qq.com/...），否则在微信内置浏览器里会跳转失败；另外，target="_blank" 要搭配 rel="noopener" 防止安全漏洞。
