iframe本身设position: fixed无效，因其被渲染为嵌入文档视口，fixed会降级为absolute导致滚动飘走，且无法响应:hover/focus/无障碍属性；正确做法是用div容器设fixed，iframe仅负责内容加载。
为什么不用 iframe 直接做右下角悬浮窗口
直接把 iframe 元素本身设 position: fixed 是无效的——iframe 会渲染成一个“嵌入的文档视口”，它的定位行为受内部文档和外部 CSS 双重约束，且在多数浏览器（尤其是 Safari 和微信内置浏览器）中，iframe 的 fixed 定位会被强制降级为 absolute，导致滚动时飘走。更关键的是，iframe 内容无法响应外部 :hover、focus 或无障碍属性（如 aria-label），按钮热区与可访问性完全失控。
正确结构：用 div 容器包裹 iframe，再对容器 fixed
悬浮逻辑必须由外层容器承担，iframe 只负责内容加载。否则你永远在调 iframe 的 width、height 和 top/right，却不知道错在哪。
-
div设position: fixed; right: 24px; bottom: 24px; z-index: 10000;—— 这是唯一可靠锚点 -
iframe设width: 100%; height: 100%; border: none;，并用box-sizing: border-box防止 padding 溢出 - 容器需显式设置尺寸（如
width: 280px; height: 420px;），不能靠iframe自撑开，否则移动端缩放后布局塌陷 - 加
pointer-events: auto;到容器，避免父级transform或opacity导致点击穿透
移动端和输入框聚焦时的兼容性补丁
iOS Safari 在 input 聚焦唤起软键盘时，会临时重置视口高度，导致 bottom: 24px 失效——按钮被顶到屏幕中间甚至消失。这不是 bug，是 Safari 的视口缩放策略。
- 监听
focusin和focusout，动态切换容器的bottom值：bottom: 80px（避开键盘）→bottom: 24px - 在
<meta name="viewport">中加入viewport-fit=cover，并确保没有user-scalable=no，否则缩放会破坏 fixed 行为 - 给
iframe加sandbox="allow-scripts allow-same-origin"，否则某些客服 SDK 会拒绝执行 JS，面板白屏
性能与安全必须做的两件事
用 iframe 实现悬浮窗，最容易被忽略的是资源浪费和样式污染，不是“能不能显示”，而是“该不该现在加载”。
立即学习“前端免费学习笔记（深入）”；
- 不要在页面加载时就写死
iframe src；用data-src存地址，首次点击或进入视口（IntersectionObserver）后再赋值src，避免阻塞首屏渲染 - 禁止在
iframe外层容器上写全局样式（如.floating-iframe * { font-size: 14px; }），它会穿透影响 iframe 内部样式，造成不可预测的字体/间距错乱
实际开发中，最常被跳过的环节是「容器是否创建了新层叠上下文」——只要父级有 transform、filter 或 opacity < 1，你的 z-index: 10000 就失效。检查 DOM 结构比调样式更重要。
