不能用 position: absolute 做底部固定悬浮条，因其依赖最近已定位祖先，遇 transform/filter/perspective 会错位；必须用 position: fixed 并设 min-height: 100vh 防 iOS 粘滞。

为什么不能用 position: absolute 做底部固定悬浮条

因为 absolute 依赖最近的已定位祖先，一旦页面某层加了 transform、filter 或 perspective（比如某些 UI 框架的 Layout 包裹器），悬浮条就会“锚定”到那个父容器里，滚动时直接消失或卡在中间。真正能稳住底部的只有 position: fixed，它始终相对于视口定位。

常见错误写法：

——上线后在 Ant Design 或 Next.js App Router 环境中大概率失效。

• 必须用 position: fixed; bottom: 0; left: 0; right: 0;
• 避免给 body 或其直接子元素加 transform: scale(1)，这会意外创建包含块
• 若页面高度不足一屏，iOS Safari 可能让 fixed 元素“粘滞”，补 body { min-height: 100vh; } 即可稳定

click 触发弹出二维码时，为什么不能只靠 CSS :hover

移动端没有 hover，手指点下去是 :active 状态，松开就退，根本不会维持显示。纯 hover 方案在 iPhone / Android 上等于不工作。

更关键的是：二维码是图片资源，首次点击若才动态设置 img.src，会触发二次加载，导致白屏、动画中断、尺寸抖动。

• 服务端渲染时就把完整二维码 URL 写死在 HTML 里，例如：
• 不要在 click 回调里拼接 URL 再赋值给 src，这破坏预加载节奏
• 用 JS 控制显隐，推荐切换类名（如 is-open），而非操作 display 或内联样式

二维码浮层怎么避免遮挡、错位和闪动

结构上必须用嵌套容器：div.footer-bar 是触发区，内部放 div.qr-popup + img，不能把 img 直接塞进按钮标签里，否则悬停/点击区域与图片位置可能错位。

闪动问题几乎都来自初始隐藏方式错误：用 display: none 会让浏览器跳过图片加载，直到显示时才 fetch，造成延迟和跳帧。

DeepBI DHTML 页面生成器

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

下载

• 初始状态用 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，宽度却只撑内容，导致左右边缘难点中。

• 给触发按钮（比如 ）加 padding: 12px 24px;，视觉不变，热区变大
• 禁用 pointer-events: none 在弹出后临时关闭重复点击，防止快速连点生成多个浮层
• 务必加 role="button" 和 tabindex="0"，否则键盘用户无法聚焦，屏幕阅读器会跳过

真正容易被忽略的是：二维码浮层如果没设 max-width 和 width: fit-content，在窄屏上会溢出视口，且无滚动机制——用户可能扫不到右半部分。别假设所有人屏幕都够宽。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！