弹窗必须用 position: fixed 而非 absolute，遮罩层和内容容器均需 fixed 定位并设合理 z-index；悬浮按钮宜用 bottom/right 定位；关闭逻辑须覆盖 click/touchstart/Escape；z-index 失效多因层叠上下文干扰。
弹窗结构必须用 position: fixed 而不是 absolute
用 absolute 会导致弹窗随滚动消失，尤其在长页面中用户一滚就找不到；fixed 才能真正“浮”在视口里。遮罩层（.overlay）和内容容器（.modal-content）都得设 position: fixed，且遮罩层要覆盖整个视口：top: 0; left: 0; width: 100%; height: 100%。
容易踩的坑：
- 没给遮罩层加
z-index，结果被 header 或 sticky 导航盖住 - 内容容器没设
z-index，或数值比遮罩层小，导致点不到按钮 - 用
transform: translate(-50%, -50%)居中时，忘了配合top: 50%; left: 50%，结果偏移失效
悬浮窗口按钮定位优先用 bottom 和 right
左上角固定位置（top: 24px; left: 24px）在窄屏、缩放或 iOS 横屏下极易被系统状态栏或 Safari 地址栏遮挡；bottom: 24px; right: 24px 更符合手指操作区域，也更容易适配不同 viewport。
实操建议：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 加
box-shadow或细边框，纯色圆按钮在复杂背景上会“消失” - 避免和 sticky footer 冲突：如果 footer 高度不固定，用 JS 动态计算安全距离，比如
bottom: calc(24px + var(--footer-height)) - 不要靠
left+width推算右对齐，移动端 viewport 变化时会错位
点击外部关闭弹窗必须监听三种事件
只监听 document.addEventListener('click', ...) 是不够的——它漏掉 Escape 键、菜单项点击、以及移动端 touch 事件。真实场景下用户会按 Esc、点空白处、点确认按钮、甚至滑动屏幕后误触，这些都要覆盖。
关键判断逻辑：
- 用
event.target.closest('.modal, .floating-btn')判断是否点在弹窗或触发器内，不在才关闭 - Escape 键监听必须加
event.preventDefault()，否则可能触发页面滚动 - 移动端要用
touchstart替代click，iOS 的 click 有 300ms 延迟，会导致菜单点完不响应 - 拖拽悬浮球松手后，记得清除
mousemove监听器，否则内存泄漏
z-index 失效大概率是层叠上下文被意外创建
写个 z-index: 9999 还是被盖住？不是数值不够大，而是父容器悄悄创建了局部层叠环境。最常见的是：position: relative + z-index: 1 的 wrapper，或者用了 transform 却没配 z-index。
排查要点：
- 检查悬浮球/弹窗所有祖先元素，有没有带
z-index的relative、absolute或fixed容器 - 弹窗用了
scale或translate？现代浏览器会为 transform 元素新建层叠上下文，必须显式加z-index - 遮罩层和弹窗的
z-index必须在同一个层叠上下文中，否则比较无效
真正难的不是让弹窗“显示出来”，而是让它在各种缩放、滚动、多点触控、辅助技术启用的场景下都不崩——尤其是焦点管理、滚动锁定、以及 aria-hidden 的动态同步，这些细节一旦漏掉，UI 就只是看起来能用而已。
