不能用 position: absolute 做底部固定悬浮条，因其依赖最近已定位祖先，遇 transform/filter/perspective 会错位；必须用 position: fixed 并设 min-height: 100vh 防 iOS 粘滞。
为什么不能用 position: absolute 做底部固定悬浮条
因为 absolute 依赖最近的已定位祖先，一旦页面某层加了 transform、filter 或 perspective（比如某些 UI 框架的 Layout 包裹器），悬浮条就会“锚定”到那个父容器里，滚动时直接消失或卡在中间。真正能稳住底部的只有 position: fixed，它始终相对于视口定位。
常见错误写法：<div class="footer-bar" style="position: absolute; bottom: 0;">——上线后在 Ant Design 或 Next.js App Router 环境中大概率失效。
<ul>
<li>必须用 <code>position: fixed; bottom: 0; left: 0; right: 0;
body 或其直接子元素加 transform: scale(1)，这会意外创建包含块body { min-height: 100vh; } 即可稳定
click 触发弹出二维码时，为什么不能只靠 CSS :hover
移动端没有 hover，手指点下去是 :active 状态，松开就退，根本不会维持显示。纯 hover 方案在 iPhone / Android 上等于不工作。
更关键的是：二维码是图片资源，首次点击若才动态设置 img.src，会触发二次加载，导致白屏、动画中断、尺寸抖动。
立即学习“前端免费学习笔记（深入）”；
- 服务端渲染时就把完整二维码 URL 写死在 HTML 里，例如：
<img src="/api/qrcode?uid=abc123" alt="扫码"> - 不要在 click 回调里拼接 URL 再赋值给
src，这破坏预加载节奏 - 用 JS 控制显隐，推荐切换类名（如
is-open），而非操作display或内联样式
二维码浮层怎么避免遮挡、错位和闪动
结构上必须用嵌套容器：div.footer-bar 是触发区，内部放 div.qr-popup + img，不能把 img 直接塞进按钮标签里，否则悬停/点击区域与图片位置可能错位。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
闪动问题几乎都来自初始隐藏方式错误：用 display: none 会让浏览器跳过图片加载，直到显示时才 fetch，造成延迟和跳帧。
- 初始状态用
visibility: hidden; opacity: 0;，hover/click 时只改visibility: visible; opacity: 1; - 浮层容器必须设
position: absolute，且父容器（.footer-bar）要设position: relative，否则定位漂移 - z-index 至少设为
10000，很多 modal 库默认用1050，999不够用
移动端点击区域太小、点不准怎么办
右下角悬浮条常被误触，尤其在 iOS 底部手势区域附近。不是把整个条拉高就行——视觉膨胀会破坏设计，关键是扩大热区而不影响布局。
WCAG 要求最小可点击区域 ≥44×44px，但底部条高度常设为 56px，宽度却只撑内容，导致左右边缘难点中。
- 给触发按钮（比如
<button class="qr-trigger"></button>）加padding: 12px 24px;，视觉不变，热区变大 - 禁用
pointer-events: none在弹出后临时关闭重复点击，防止快速连点生成多个浮层 - 务必加
role="button"和tabindex="0"，否则键盘用户无法聚焦，屏幕阅读器会跳过
真正容易被忽略的是：二维码浮层如果没设 max-width 和 width: fit-content，在窄屏上会溢出视口，且无滚动机制——用户可能扫不到右半部分。别假设所有人屏幕都够宽。
