唯一可靠方案是position: fixed配合padding-bottom防遮挡；需同时设置bottom: 0、left: 0、right: 0和z-index: 1000，并为body设置等于操作条高度的padding-bottom，且避开transform等导致fixed失效的CSS属性。
直接用 position: fixed，但必须配 padding-bottom 防遮挡——这是唯一可靠、兼容性好、不依赖 JS 的方案。
为什么不能用 position: absolute + bottom: 0
它看似简单，实际极易失效：absolute 会向上查找最近的 position: relative 祖先，如果没找到，就相对于 html 根节点定位，按钮可能飘到页面顶部或右侧；更麻烦的是，父容器高度会塌陷，导致内容被截断或小屏下布局错乱。移动端多列转单列时，按钮还会悬在上半部分内容末尾，而非视觉底部。
position: fixed 必须写的三件套
只写 position: fixed 不够，缺一不可：
-
bottom: 0—— 锚定视口底部，不是文档流底部 -
left: 0和right: 0—— 控制宽度铺满，避免靠左/右偏移（仅设width: 100%在某些缩放或 zoom 下会漏边） -
z-index: 1000—— 显式声明层级，999够用，别堆到99999，否则和弹窗、广告位冲突
body 必须加 padding-bottom，值等于操作条高度
否则正文最后一段文字会被遮住，用户永远看不到结尾。常见错误是只给操作条设 height: 56px，却忘了同步设置 body { padding-bottom: 56px; }。如果操作条高度响应式变化（比如小屏缩为 48px），padding-bottom 也得用媒体查询同步调整，否则大屏下留白过多、小屏下又遮内容。
立即学习“前端免费学习笔记（深入）”；
iOS Safari 和滚动交互的几个硬坑
固定操作条在移动端不是“设完就完”：
- 别在操作条内部放
<input>或<textarea>—— iOS 键盘弹出后，fixed 元素常卡在错误位置，甚至消失 - 高度务必用固定值（如
56px），不用100vh或百分比 —— Safari 地址栏收放时会触发视口高度跳变，导致操作条瞬间上移或下掉 - 如果操作条含图标+文字，确保整体可点击区域 ≥
48px × 48px—— 图标本身可以小，但用padding扩展热区，并设box-sizing: border-box
最易被忽略的是：操作条是否真正“脱离干扰”。只要祖先元素用了 transform、filter 或 will-change，fixed 就可能被重新锚定到那个局部容器，而不是视口。稳妥做法是让操作条的直系父容器设 position: relative，哪怕它只是个空 <div>。
