右下角按钮在iphone上点不了是因为position: fixed以物理视口底边为基准，而ios安全区底部有21–34px的home indicator区域，导致按钮被系统ui遮挡；正确解法是用calc(20px + env(safe-area-inset-bottom, 0px))动态适配。
直接用 position: fixed + bottom/right 即可实现右下角固定，但不加 env(safe-area-inset-bottom) 适配，在 iPhone X 及后续机型上必然被 Home Indicator 遮挡，用户点不到。
为什么右下角按钮在 iPhone 上点不了
不是 CSS 写错了，而是 position: fixed 默认以物理视口底边为基准，而 iOS 的安全区域（safe area）底部有约 21–34px 高度（Home Indicator 区域），bottom: 20px 实际会落在不可触达的黑条里。现象包括：按钮半透明、点击无响应、缩放后突然消失。
- 仅靠
z-index无法解决——遮挡来自系统 UI 层，不是网页层叠问题 - 不用 JS 检测设备型号，
env()是唯一声明式、零维护的方案 - 安卓全面屏设备也支持
env(safe-area-inset-bottom)（Chrome 69+、WebView 76+）
如何正确设置 bottom 值避开安全区
关键不是“加 padding”，而是让按钮本身离屏幕底边足够远，同时又不破坏其他设备体验。必须用 calc() 把基础偏移和安全区动态值叠加：
.feedback-btn {
position: fixed;
bottom: calc(20px + env(safe-area-inset-bottom, 0px));
right: 20px;
z-index: 100;
}
-
env(safe-area-inset-bottom, 0px)的0px是 fallback，确保老浏览器不崩样式 - 不要写成
bottom: env(safe-area-inset-bottom)—— 这会让按钮紧贴安全区顶边，离屏幕底边只剩几像素，仍可能被遮 - 避免用
margin-bottom或padding-bottom作用于按钮自身——fixed 元素的 margin/padding 不影响定位基准
哪些父级属性会让 fixed 按钮突然偏移
一旦按钮嵌套在某个容器内，且该容器有以下任意样式，position: fixed 就会失效或相对该容器定位（尤其在 Chrome 旧版、Safari 15.4 前）：
-
transform（哪怕只是transform: translateZ(0)） will-change: transform-
filter（如filter: blur(0)） perspective
验证方式：打开 DevTools → Elements → 选中按钮 → 查看 Computed 面板中 position 是否仍为 fixed，且 offsetParent 是 document 还是某个 div。解法只有一条：document.body.append(feedbackBtn)，把它提到 直接子级。
移动端还要注意的三个细节
右下角按钮不是设完 bottom 和 right 就万事大吉：
- 别用
right: 5%—— 百分比基于 viewport 宽度，小屏下按钮太靠边，拇指难触达；推荐right: clamp(12px, 4vw, 24px) - iOS 软键盘弹出时，部分 Safari 版本会临时压缩视口高度，导致按钮上跳；监听
focus到输入框时，可临时切为position: absolute+bottom: 0，blur 后切回 -
z-index失效大概率不是值不够大，而是祖先元素创建了新层叠上下文（比如带opacity: 0.99的 wrapper）；检查直系父容器是否含opacity、filter、transform
最常被忽略的是：你写的 bottom: 20px，在用户双击放大页面后，实际像素距离屏幕底边已远超 20px，而 env(safe-area-inset-bottom) 始终返回真实物理距离——这个差值，就是按钮消失的真正原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
