必须用position: fixed而非absolute，因fixed始终相对视口定位、滚动不偏移，而absolute依赖最近已定位祖先，遇transform/perspective/filter易错位；正确写法为bottom: 20px; right: 20px;。
直接用 position: fixed + bottom/right 定位，配合足够高的 z-index，就能稳稳钉在右下角；别用 absolute，也别依赖 JS 动态计算位置——滚动时它会“掉队”或错位。
为什么必须用 position: fixed 而不是 absolute
absolute 依赖最近的已定位祖先，一旦父容器有 transform、perspective 或 filter，就会创建新的包含块，导致浮窗脱离视口锚点；fixed 始终相对于视口，滚动不偏移。常见错误是写了 position: fixed 却漏了 bottom 和 right，结果元素堆在左上角（默认 top: 0; left: 0）。
- 正确写法：
bottom: 20px; right: 20px; - IE6 不支持
fixed？现在可以忽略——2026 年主流浏览器已无此兼容需求 - 移动端小屏下，
right: 20px可能导致关闭按钮被拇指遮挡，建议改用bottom: 10px; left: 50%; transform: translateX(-50%);居中底部
z-index 设多少才不会被遮住
导航栏、轮播图、第三方 SDK 弹层常设 z-index: 999 或 1000，所以广告浮窗至少要 z-index: 1001；若页面用了 Ant Design、Element Plus 等 UI 库，它们的弹层默认 z-index 在 2000 左右，此时 z-index: 9999 更稳妥。
- 不要只写
z-index: 9999就完事——必须确保该元素的 stacking context 没被意外截断（比如父级有opacity: 0.99或will-change: transform） - 检查是否被
iframe遮挡：某些广告素材用iframe加载，而 iframe 自身有独立渲染层，z-index对它无效；此时需在 iframe 的style中加z-index: -1并设position: relative来降级
如何让浮窗不干扰用户操作和 SEO
搜索引擎对大块 position: fixed 广告敏感，尤其当它覆盖首屏主要内容或表单按钮时，可能被判定为“干扰性内容”；辅助技术也会误读它为主内容。
- 给浮窗容器加
aria-hidden="true"和role="presentation" - 避免在
<main></main>或关键 CTA（如“立即购买”按钮）正下方固定浮窗 - 关闭按钮必须可键盘聚焦，且支持
Escape键关闭；别用onclick="this.parentElement.style.display='none'"这种内联写法——它绕过焦点管理，也不方便统一清理状态 - 移动端务必加
touch-action: manipulation，否则点击关闭按钮可能触发 300ms 延迟，用户得点两下
最易被忽略的一点：浮窗打开时没禁用 body 滚动，用户一滚页面，浮窗就“悬空”在半路；更隐蔽的是，关闭后没恢复 window.scrollY，用户回到原位置失败——这问题在长页面+锚点跳转场景下特别明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
