必须用position: fixed而非absolute，因absolute会锚定最近已定位祖先（如含transform的父容器），滚动时按钮随其偏移甚至悬空；fixed则始终相对于视口，滚动不偏移，是稳住右下角的唯一方案。

为什么必须用 position: fixed 而不是 position: absolute

因为 absolute 会锚定到最近的已定位祖先（比如加了 transform、perspective 或 filter 的父容器），滚动时按钮就“粘”在那个父层里，甚至卡在半空；而 fixed 始终相对于视口，滚动不偏移——这是唯一能稳住右下角的方案。

常见错误是：页面用了 React/Vue 框架的布局封装组件（如 ConfigProvider）、或 CSS 中某层加了 transform: translateZ(0)，结果 absolute 按钮突然飘走。别猜，直接换 fixed。

bottom 和 right 该设多少才靠谱

别用 0、别用百分比、也别用 vw。iOS Safari 对视口单位解析不稳定，贴边还会遮系统任务栏或浏览器滚动条。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• bottom: 24px; right: 24px; 是最小安全间距，兼顾点击可达性与视觉留白
• 移动端可单独加大：@media (max-width: 768px) { bottom: 80px; }，防止误触底部导航栏
• 若按钮含文字或 SVG 图标，显式设死 width 和 height（比如 56px），避免字体渲染差异导致热区浮动

怎么确保它「可点」又「不遮内容」

它天然不占文档流空间，但很多人误以为要给 body 加 padding-right 来避让——这会导致窄屏下横向滚动条意外触发。

立即学习“前端免费学习笔记（深入）”；

• 正确做法：只约束按钮自身，用 z-index: 999（别堆到 999999，否则压住全屏视频控件或 devtools）
• 必须加 cursor: pointer，否则 hover 没手型，用户根本意识不到它是按钮
• 触摸热区至少 44px × 44px：图标本身 24px 就够，但按钮容器得设成 width: 56px; height: 56px;，再用 display: flex; align-items: center; justify-content: center; 居中图标
• 加 box-shadow 或细边框，纯色圆按钮在复杂背景上极易不可见

iOS Safari 上按钮“一闪即逝”或“跳动”怎么办

这不是 bug，是 Safari 为省电做的滚动优化：页面高度不足一屏时，fixed 元素可能延迟重绘或错位。

• 给 body 加 min-height: 100vh，提供稳定锚点
• 避免在按钮里塞重型组件（如 iframe 客服窗、未优化 SVG 动画），固定定位元素频繁参与合成层计算，低端安卓机上直接掉帧
• 滚动显隐逻辑务必节流，用 requestAnimationFrame 替代直接监听 scroll，否则快速滚动时按钮反复闪现
• iOS 地址栏收起/展开瞬间的跳动无法完全消除，靠预留安全边距 + 视觉缓冲来弱化感知

真正难的不是写出来，是状态管理：用户连点多次生成多个实例、拖拽后没清理 mousemove 监听器、关闭时用 display: none 而非 remove()——这些细节不处理，上线后就是偶发 bug 的源头。