sticky定位不能直接让按钮“贴底”，因其本质是条件性relative+fixed，bottom支持弱且行为不一致；父容器无明确高度或滚动上下文时bottom:0常失效，Chrome/Safari支持仍属实验性，移动端WebView基本忽略；可靠方案是flex+margin-top:auto或fixed+calc()。
sticky 定位为什么不能直接让按钮“贴底”
因为 position: sticky 本质是相对父容器的“条件性 relative + fixed”，它只在滚动到指定阈值（如 bottom: 0）时才触发粘性行为，但浏览器对 bottom 方向的 sticky 支持弱、行为不一致——多数情况下它根本不会生效，尤其当父容器没有明确高度或未触发滚动上下文时。
常见错误现象：bottom: 0 写了但按钮始终停在顶部附近，或者完全不动；控制台无报错，但样式无效。
- Chrome 和 Safari 对
bottom+sticky的支持仍属实验性，实际渲染依赖父元素是否形成 BFC 且有可滚动区域 - 即使生效，按钮也会“卡”在父容器底部边缘，而非视口底部——这和“常驻悬浮”预期不符
- 移动端 WebView（如微信内置浏览器）基本忽略
bottom: sticky
用 flex + margin-top: auto 实现真正可靠的底部悬浮
这是目前最稳定、无需 JS、兼容 IE11+ 的方案：把按钮放在一个固定高度或撑满视口的 flex 容器底部，利用 margin-top: auto 推到底部。
关键点在于容器必须有明确的高度约束（如 height: 100vh），且设为 display: flex; flex-direction: column。
立即学习“前端免费学习笔记（深入）”；
<div class="page-wrapper"> <main>页面主要内容</main> <button class="floating-btn">提交</button> </div>
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1; /* 占满剩余空间 */
}
.floating-btn {
margin-top: auto; /* 关键：自动占据前面剩余空间 */
margin-bottom: 20px;
align-self: center;
}- 按钮始终紧贴视口底部内边距（
margin-bottom控制距离），不受内容高度影响 - 不需要 JS 监听 scroll 或 resize，无性能开销
- 所有现代浏览器包括 iOS Safari、Android Chrome 均 100% 支持
需要真正“悬浮”（脱离文档流）时，用 fixed + calc()
如果按钮必须像原生 App 那样浮在内容之上、不占布局空间、且始终锚定视口底部（比如带阴影、圆角、z-index 覆盖），那就该用 position: fixed，配合 calc() 处理安全区（尤其是 iPhone X+ 的底部 home indicator）。
.floating-btn {
position: fixed;
bottom: calc(env(safe-area-inset-bottom) + 16px);
right: 16px;
z-index: 100;
}-
env(safe-area-inset-bottom)在支持 CSS env() 的 iOS Safari 中返回底部安全区高度（通常 34px），避免按钮被遮挡 - 安卓设备不支持
env()，会降级为16px，不影响功能 - 务必设置
z-index，否则可能被弹层、广告等覆盖 - 注意：fixed 元素脱离文档流，需手动处理点击穿透（如父容器有
pointer-events: none时按钮会失效）
别忘了移动端 touch 区域和可访问性
按钮在手机上点不中、或屏幕阅读器无法识别，往往不是定位问题，而是交互细节缺失。
- 最小触控尺寸至少
44px × 44px，可用min-width/min-height或padding保证 - 添加
aria-label，比如<button aria-label="立即提交表单"> - 避免仅靠
:hover触发状态变化，要补充:active和focus - 如果按钮在键盘导航中需要跳过，用
tabindex="-1"；若需聚焦，则保持默认tabindex="0"
复杂点不在定位本身，而在它是否真能被用户稳定、无障碍地触达——尤其当页面有多个 fixed 元素或动态加载内容时，z-index 层级和 focus 管理很容易被忽略。
