左右悬浮广告必须用 position: fixed 实现，因其以视口为基准定位、随滚动始终可见；float 和 absolute 均无法真正悬浮，且需合理设置 z-index、响应式处理及可访问性支持。
左右悬浮广告必须用 position: fixed
浮动（float）完全不能实现“悬浮”效果——它只是让元素脱离文档流参与文本环绕，不会脱离视口。真正能固定在屏幕某处、随滚动始终可见的，只有 position: fixed。
常见错误现象：用 float: left + margin-left 模拟左浮，结果一滚动广告就消失；或误用 position: absolute，导致广告随页面滚动而移位。
-
position: fixed的定位基准是视口（viewport），不是父容器，所以它天然“悬浮” - 左浮广告设
top: 50px; left: 20px;，右浮广告设top: 50px; right: 20px;，两者互不干扰 - 必须加
z-index（如z-index: 999），否则可能被内容遮盖 - 避免用
bottom+height组合控制高度，移动端容易错位；优先用top+max-height+overflow-y: auto
左右悬浮广告的 HTML 结构要扁平且语义清晰
别嵌套多层 div 包裹广告，也不要把两个广告塞进同一个容器再 flex 排列——position: fixed 元素已脱离文档流，flex 容器对它无效，反而增加无谓的 DOM 和样式干扰。
使用场景：电商首页右下角客服浮窗 + 左下角优惠券弹窗；后台系统左上角通知气泡 + 右上角用户菜单。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 每个悬浮广告独立写一个
<aside class="ad-float ad-float--left"></aside>或<aside class="ad-float ad-float--right"></aside>，语义明确、便于 JS 控制显隐 - 不要用
<div id="float-container"> 包住两个广告，这会让 CSS 定位逻辑变复杂，也影响可访问性 <li>若需 JS 动态控制（如点击关闭、滚动后显示），直接操作对应 class 的元素，避免 DOM 查找层级过深</li> <li>广告内嵌 <code><iframe></iframe>时，务必设width和height属性，防止加载前布局抖动 - 推荐方案：小屏下统一收到底部，用
bottom: 20px; left: 50%; transform: translateX(-50%);居中一个主广告，另一个降级为页脚链接或折叠面板 - 必须保留至少一个广告的可访问性：用
aria-label描述用途（如aria-label="优惠券领取入口"），并确保键盘Tab可聚焦 - 如果广告含动画（如淡入、滑动），小屏下禁用
animation，改用transition配合opacity，减少性能开销 - 测试真机滚动时是否触发重排：部分安卓 WebView 在
fixed元素上频繁重绘，可用will-change: transform缓解 - 统一定义基础层级变量：比如
--z-nav: 1000; --z-float-left: 990; --z-float-right: 995;，用 CSS 自定义属性管理，避免魔数 - 左右广告的
z-index必须有明确差值（至少差 5），且右浮略高，符合用户视觉动线（从左到右阅读时，右侧信息更“新”） - 检查是否有父容器意外创建了新层叠上下文（如
opacity: 0.99、transform: translateZ(0)），这会让子元素的z-index失效 - 上线前用浏览器开发者工具的“Rendering > Paint flashing”功能快速验证悬浮区域是否频繁重绘
响应式下左右悬浮广告要主动隐藏或重定位
小屏设备（尤其是竖屏手机）上，左右同时悬浮会严重挤压内容区域，甚至遮挡关键按钮。这不是“适配”，是 UX 灾难。
容易踩的坑：只加 @media (max-width: 768px) 就把两个广告 display: none，结果 SEO 和屏幕阅读器完全读不到广告信息；或用 JS 判断宽度后强行移动位置，但未同步更新焦点顺序。
z-index 层级冲突是上线后最常被忽略的问题
左右悬浮广告看似独立，但实际共用一个层叠上下文。一旦页面里有其他 position: relative 或 position: fixed 元素（比如导航栏、模态框、视频播放器控件），z-index 值稍不注意就会互相覆盖。
典型错误：右浮广告 z-index: 999，但顶部导航栏设了 z-index: 1000，结果广告被遮在下面；或者两个广告都设 z-index: 999，浏览器按 DOM 顺序渲染，后写的那个总在上面，造成左右“打架”。
