position: fixed 是唯一真正固定在视口底部的方式；必须同时设置 bottom: 0、left: 0、right: 0 才能拉满宽度并精准贴底，否则宽度塌缩、位置偏移，且需配合 body padding-bottom 避免遮挡正文。
直接用 position: fixed 是唯一能真正让按钮“始终贴在视口底部、滚动不消失”的方式；但只写 bottom: 0 不够，必须同时设 left: 0 和 right: 0，否则宽度会塌缩、位置不可控。
为什么 fixed 按钮没贴满底部？
常见错误是漏掉 left 和 right 声明。浏览器对 position: fixed; bottom: 0 的默认行为是：宽度按内容收缩，左边界对齐文档流起始位置（通常是左上角），结果按钮只占一小块、偏左或“消失”。
-
position: fixed; bottom: 0;→ 宽度自动为内容宽，左右无约束 -
position: fixed; bottom: 0; left: 0; right: 0;→ 宽度拉满视口，真正“贴底” - 如果按钮只需固定宽度（如 100% 容器内居中），可用
width: 100%; max-width: 480px; margin: 0 auto;，但依然要保留left: 0; right: 0
body 内容被遮挡怎么办？
fixed 元素脱离文档流，不占空间，所以正文最后一段常被盖住。解决办法不是调 z-index，而是给 body 或主容器加 padding-bottom，值等于悬浮条高度。
- 推荐用固定像素值，例如
body { padding-bottom: 56px; } - 禁用
vh或百分比：Safari 在地址栏收放时会重算视口高度，导致 padding 突变、内容跳动 - 若悬浮条高度动态（如响应式变化），需 JS 监听
resize更新padding-bottom
移动端点不中或抖动怎么修？
iOS Safari 和部分安卓 WebView 对 fixed 的视口锚定不稳定，尤其在键盘弹出、地址栏切换时，按钮会突然上移或热区偏移。
- 加
min-height: 100vh到body或根容器，防止短页面下视口收缩引发抖动 - 用
bottom: calc(24px + env(safe-area-inset-bottom))替代纯像素值，适配刘海屏和小黑条 - 避免
transform、filter、opacity 等触发新层叠上下文的父样式——它们会让 <code>fixed相对于父容器而非视口定位 - 真机测试时打开软键盘，观察按钮是否被顶起；若严重，改用
position: absolute+ JS 动态更新bottom更可控
最易被忽略的点：z-index 生效前提是元素处于同一层叠上下文。如果按钮嵌在某个 React 组件里，而该组件父节点用了 transform: translateZ(0)，那再高的 z-index 也压不过 modal —— 此时得把按钮提到 下，或重构定位逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
