fixed定位按钮“粘”在屏幕底部是因为脱离文档流、以视口为参照，需显式设置bottom/right；ios safari中视口变化易致抖动，应设min-height:100vh；点击区小需padding扩展并设z-index；适配刘海屏用calc(20px + env(safe-area-inset-bottom))。
fixed定位为什么会让按钮“粘”在屏幕底部
因为 position: fixed 脱离文档流，参照物是视口（viewport），不是父容器。只要不加 top/bottom，它默认按正常流位置渲染，但一滚动就“消失”——这不是bug，是没告诉浏览器该停在哪。
真正让它浮在右下角的关键，是显式设置 bottom 和 right：
-
bottom: 20px表示距离视口底边20px，不是页面底部 -
right: 20px同理，不是父元素右边界 - 如果只设
bottom不设right，按钮会贴左，容易被误认为“没生效”
iOS Safari里按钮突然上移或抖动怎么办
iOS Safari 在地址栏收起/展开时会触发视口高度变化，fixed 元素可能被错误重绘，尤其在页面内容少、未触发滚动时。这不是CSS写错了，是浏览器行为。
实操建议：
- 加
min-height: 100vh到body或根容器，确保页面至少撑满一屏 - 避免用
bottom: 0+transform: translateY(-50%)做垂直居中——iOS对transform+fixed的组合渲染不稳定 - 真机调试时，打开「开发者工具 → Rendering → Emulate mobile viewport」看是否复现，别只信桌面模拟器
点击区域太小，手指点不中？用padding和z-index补救
原生APP悬浮按钮通常有48dp以上点击热区，但CSS里只设 width/height 容易导致视觉大小和可点区域不一致。
正确做法：
- 用
width和height控制图标区域，再用padding扩展点击范围（比如padding: 12px） - 必须加
z-index: 9999（数值够大即可），否则可能被轮播图、弹窗遮住——尤其在Vue/React组件嵌套深时，父组件的z-index可能意外截断层级 - 别依赖
border-radius: 50%自动居中，要配合display: flex+align-items: center+justify-content: center确保图标居中
需要适配刘海屏或安全区？用env()函数兜底
iPhone X 及后续机型底部有安全区域（safe area），纯 bottom: 20px 可能让按钮卡进Home Indicator里。
兼容方案：
- 改用
bottom: calc(20px + env(safe-area-inset-bottom))，iOS会自动注入底部安全距离 - Android目前不支持
env(safe-area-inset-bottom)，但不会报错，直接忽略，所以可以放心写 - 别用
@supports (env(safe-area-inset-bottom))包裹——现代浏览器基本都支持，加了反而增加维护成本
focus 事件临时把 bottom 改成 auto + top，CSS自身解决不了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
