position: fixed 必须配 z-index 和显式方向值，因其默认定位在视口左上角且不自动分层；z-index 至少设 1000 才能压住主流 UI 库弹窗，而 right 或 bottom 必须显式设置（不可仅写 position: fixed），否则元素不可见或被遮挡。
直接用 position: fixed 就能实现，但绝大多数人卡在 z-index 被遮、移动端错位、滚动条被盖这三处，不是代码写不对，是没处理好上下文。
为什么 position: fixed 必须配 z-index 和显式方向值
只写 position: fixed 不会自动贴右下角——它默认堆在视口左上角。必须手动设 right 或 bottom（别同时设 top 和 bottom，浏览器可能忽略其中一个）。z-index 至少要 1000，因为 Element Plus 的弹窗默认是 2000，Ant Design 是 1000，不设够就压不住。
- 错误写法：
style="position: fixed"—— 缺定位值，元素不可见 - 危险写法：
z-index: 999—— 够不到主流 UI 库的 modal 层级 - 隐蔽坑：
transform: translateZ(0)会创建新层叠上下文，导致父容器的z-index失效
移动端右下角悬浮按钮怎么避免被虚拟按键/滚动条挡住
iOS Safari 地址栏收起时会重算视口高度，安卓部分机型滚动条宽度不固定，right: 20px 在某些设备上会让按钮悬空或半截被切。不能靠猜，得动态算。
- 保守方案：用
right: calc(20px + 17px)，但 Windows 滚动条宽约 17px，macOS 是 0，iOS 是 0 - 通用方案：JS 计算真实滚动条宽度：
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth，再设right: ${20 + scrollbarWidth}px - 小屏适配：iOS Safari 中 fixed 元素易抖动，给
html加height: 100%; overflow-x: hidden可缓解
客服悬浮窗点不开、关不掉的三个硬性条件
不是 JS 写错了，是 DOM 挂载位置、事件绑定方式、CSS 阻断规则没对齐。第三方客服 SDK（如美洽、七鱼）几乎都要求这三点同时满足。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 挂载点必须是
document.body直接子节点，不能嵌在div#app或 Vue/React 的根容器里，否则overflow: hidden会截断面板 - 入口按钮必须带厂商约定的 data 属性，比如美洽是
data-meiqia-open="true"，自己写onclick="window.meiqia.open()"会报undefined - 脚本必须放
</body>前且加async，否则 SDK 初始化时document.body还没解析完，报Cannot read property 'appendChild' of null
广告悬浮窗如何避免被浏览器拦截或 SEO 降权
Chrome 和 Safari 对大块 position: fixed 广告越来越敏感，尤其在首屏加载时。不是加个 display: none 就安全，关键在语义和时机。
- 必须加
aria-hidden="true" role="presentation"，否则屏幕阅读器会把广告当主内容朗读 - 避免在
<main>正上方或表单区域正下方固定，搜索引擎可能判为干扰性内容 - 不要在
<head>里内联广告 JS，用IntersectionObserver监听用户滚动到页面中下部后再加载 - 关闭按钮失效？检查是否误设了
pointer-events: none在父容器上，或者用了display: none而非visibility: hidden+opacity: 0
真正麻烦的是多层嵌套场景：按钮在 iframe 里、客服面板走 shadow DOM、或者和 React Portal 冲突——这时候 getBoundingClientRect() 返回的坐标可能失真，得手动测 offsetParent，不能只信 CSS 定位值。
