必须用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 沙箱 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 的源头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
