position: fixed 必须显式设置 right 和 bottom 才能固定在右下角，仅设 fixed 会使其按默认流位置渲染或消失；需配合 z-index（如1050）、min-height: 100vh、env(safe-area-inset-bottom)适配及 viewport 元标签确保稳定。

position: fixed 必须显式设 right 和 bottom

只写 position: fixed 不会自动停在右下角，它只是脱离文档流、以视口为参照——没指定锚点，浏览器就按默认流位置渲染，滚动时按钮“消失”或堆在左上角。真正让它浮在右下角的，是必须同时设置 right 和 bottom 值。

• right: 1rem 或 right: 20px 控制距屏幕右边距离，别用百分比（缩放时偏移错乱）
• bottom: 1rem 或 bottom: 20px 控制距屏幕底边距离，不是页面底部
• 切忌只设 bottom 不设 right——按钮会贴左，容易误判为“没生效”
• Bootstrap 的 fixed-bottom 只管底部对齐，不处理左右，不能替代 right 声明

z-index 要够高，但得避开层叠上下文陷阱

按钮常被 modal、导航栏或 offcanvas 盖住，问题未必是 z-index 不够，而是父容器创建了新层叠上下文，把 z-index “截断”了。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 推荐值：z-index: 1050（介于 Bootstrap modal 的 1055 和 tooltip 的 1060 之间）
• 检查按钮是否嵌套在带 transform、opacity 或 <code>will-change 的父元素里——这些属性会创建新层叠上下文，让 z-index 失效
• 避免给 body 或根容器加 overflow: hidden，iOS 上会导致 fixed 元素被裁剪
• 如果用了 offcanvas，确认它没在 body 上设 overflow: hidden

适配安全区域和 iOS 视口抖动

iPhone X 及更新机型有底部小黑条，纯 bottom: 20px 会让按钮被遮挡；iOS Safari 在地址栏收起/展开时还会触发视口高度突变，导致按钮上跳或抖动。

• 用 bottom: max(20px, env(safe-area-inset-bottom)) 替代固定值，兼顾普通设备与刘海屏
• 给 body 加 min-height: 100vh，防止页面内容少时视口收缩引发抖动
• 别用 bottom: 0; transform: translateY(-50%) 做垂直居中——iOS 对 fixed + transform 组合渲染极不稳定
• 必须加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，否则移动端 fixed 定位直接失效

点击热区小、移动端点不中怎么补救

视觉上按钮够大，但手指点不中，本质是可交互区域远小于视觉尺寸——尤其在 iOS Safari 和部分安卓 WebView 中，触摸坐标未校准或祖先层叠上下文干扰会导致热区偏移。

• 按钮本身至少设 width: 48px; height: 48px，符合移动端最小点击热区标准
• 用 padding 扩展点击区，别只靠 font-size 或图标撑开
• 确保按钮是语义化 <button></button>，或非 button 元素加 tabindex="0"
• 键盘弹出时 Android 会错误重绘 bottom 值，需 JS 监听 resize 或 visualViewport.height 动态调整

真正稳定的右下角悬浮按钮，从来不是靠“写对几个 CSS 属性”就能一劳永逸。它卡在 viewport 行为、层叠上下文、安全区计算和触摸坐标校准的交界处——任何一个环节松动，都会在真机上突然失效。

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