用 position: fixed 而不是 absolute 是因为 fixed 以视口为基准，滚动时始终固定在屏幕右下角；absolute 则受最近已定位祖先影响，遇 transform 等属性会相对该祖先定位导致偏移。
为什么用 position: fixed 而不是 absolute？
因为 position: fixed 的定位基准是视口（viewport），滚动时按钮始终贴着屏幕右下角；而 position: absolute 依赖最近的已定位祖先元素，一旦父容器加了 transform、filter 或 perspective，它就会相对那个父级定位——结果一滚动就偏移甚至消失。
常见错误现象：fixed 按钮在开发时位置正常，上线后突然“粘”在某个模块右下角不动，大概率是父级悄悄加了 transform: translateZ(0) 做硬件加速。
- 检查开发者工具的 “Computed” 面板，确认
position确实是fixed，且top/right/bottom/left值没被覆盖 - 把按钮直接挂到
下，避免嵌套在带transform的 wrapper 里 - 如果无法改父级样式，可用
top: calc(50vh - 65px)（假设按钮高 130px）绕过干扰
bottom 和 right 必须同时设，不能只写一个
只设 bottom: 20px 不写 right，浏览器会按默认值 right: auto 处理，按钮可能靠左或居中，行为不可控。右下角定位必须显式声明两个方向。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 推荐写法：
bottom: 20px; right: 20px;—— 距离视口底边和右边各 20px，留出点击余量 - 避免用
px以外的单位（如%、em），缩放或字体调整时容易错位 - 移动端需补充适配：
right: env(safe-area-inset-right, 20px); bottom: env(safe-area-inset-bottom, 20px);防 iPhone 刘海/小圆角遮挡
z-index 不是越大越好，但必须显式设置
不设 z-index 时，fixed 元素默认处于 stacking context 的“新层”，但若页面其他元素用了 z-index: 999 且其父级有 transform，仍可能被盖住。
- 推荐值：
z-index: 1000—— 足够高于常规内容，又不会压住 devtools、全屏视频控件或系统级弹窗 - 别用
999999这类魔数，维护时难判断层级关系 - 确保按钮父容器没意外触发新的 stacking context（比如带
opacity 或 <code>will-change）
交互与可访问性不能只靠 CSS
按钮是功能入口，不是装饰。光有 position: fixed 不够，用户还得能点、能键盘操作、能被读屏软件识别。
- 必须用语义化
<button></button>标签，而非<div> + <code>click事件 - 加
aria-label="返回顶部"，尤其按钮内是图标无文字时 - 监听
scroll控制显隐要节流，否则 iOS 上频繁触发导致卡顿；建议用requestIdleCallback或setTimeout防抖 - 触屏设备需保证点击区域 ≥ 44×44px，可用
padding扩展，别只靠width/height
实际最简可用结构就是：<button aria-label="返回顶部" class="floating-btn"></button>，配合 .floating-btn { position: fixed; bottom: 20px; right: 20px; z-index: 1000; } —— 其他所有问题，基本都出在“以为设了 fixed 就万事大吉”这个认知上。
