position: fixed 是实现底部悬浮条的唯一可靠方案；需用 flex 布局对齐按钮，::before 扩展点击热区，env(safe-area-inset-bottom) 解决 iOS 底部遮挡，且须完善交互反馈与 z-index 管理。
用 position: fixed 实现底部悬浮条布局
底部固定悬浮条本质是脱离文档流的定位容器，position: fixed 是唯一可靠方案（sticky 在底部不生效，absolute 会随滚动消失）。关键不是“怎么固定”，而是“怎么让两个按钮在固定容器里正确对齐且不重叠”。
常见错误是直接给按钮设 float: left/right —— 在 fixed 容器里 float 失效；或用 margin-left: auto 挤右边按钮，但没设容器宽度时行为不可控。
推荐做法：给悬浮条容器设 display: flex，用 justify-content: space-between 自动撑开左右间距：
<div class="bottom-bar"> <button class="bar-btn" id="left-btn">返回</button> <button class="bar-btn" id="right-btn">提交</button> </div>
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding: 8px 16px;
background: #fff;
border-top: 1px solid #eee;
z-index: 1000;
}
.bar-btn {
padding: 10px 16px;
border: none;
border-radius: 4px;
font-size: 14px;
}
按钮点击区域太小？补全可点击范围
移动端用户手指操作容错率低，单纯靠按钮内边距不够。实际项目中常发现“点了没反应”，其实是点击热区没覆盖到视觉区域外侧。
立即学习“前端免费学习笔记（深入）”；
解决方式不是盲目加大 padding，而是用 ::before 伪元素扩展点击区域，不影响视觉样式：
.bar-btn::before {
content: "";
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
}
注意：必须给 .bar-btn 加 position: relative，否则伪元素定位失效；z-index 不用设，它默认在按钮下方，不影响点击穿透。
- 如果按钮有图标+文字，优先把整个
button设为display: flex+align-items: center，避免文字垂直偏移 - 避免在按钮上直接设
width: 100%—— 会导致左右按钮挤占全部宽度，space-between失效
iOS Safari 底部地址栏遮挡问题
iOS Safari 滚动时会隐藏地址栏，导致 bottom: 0 的悬浮条被顶上去（尤其页面内容不足一屏时）。这不是 bug，是浏览器视口高度动态变化造成的。
最轻量解法：用 env(safe-area-inset-bottom) 补底边距，仅在有安全区域的设备生效：
.bottom-bar {
padding-bottom: calc(8px + env(safe-area-inset-bottom));
margin-bottom: env(safe-area-inset-bottom);
}
不需要 JS 监听 resize 或判断 UA，CSS 原生支持。但要注意：env() 在旧版 iOS 不支持，若需兼容 iOS 11 以下，得降级用 JS 动态计算 window.innerHeight 和 document.documentElement.scrollHeight 差值。
按钮状态与交互反馈别漏掉
固定悬浮条容易被当成“静态装饰”，但用户点击后没反馈会怀疑是否点中。重点不是加动画，而是保证基础状态可感知：
- 必加
:active样式，哪怕只是opacity: 0.7，否则 iOS 上点击无任何响应感 - 禁用状态用
pointer-events: none+opacity: 0.5，别只靠disabled属性 —— 它在fixed元素里有时不触发样式 - 如果右侧按钮是表单提交，记得在 JS 中调用
event.preventDefault()前先给按钮加disabled，防止重复点击
真正麻烦的是多层 z-index 管理：悬浮条要高于弹窗、高于 sticky 导航栏，但低于全屏 loading 遮罩。别硬写 z-index: 9999，用语义化层级（比如 --z-index-bar: 100）配合 CSS 变量更可控。
