position: fixed 是唯一可靠选择，必须配合 bottom: 0 和 left: 0（或 right: 0），并设置固定高度、body padding-bottom 匹配该高度，避免遮挡与层级问题。
position: fixed 是唯一可靠选择
想让底部悬浮条始终贴在视口最下方、滚动不消失，position: fixed 是目前兼容性最好、行为最确定的方案。其他方式如 position: absolute 或 position: sticky 在底部场景下基本不可靠——前者依赖父容器定位上下文，一滚动就飘走；后者对 bottom: 0 支持极差，Chrome/Safari 表现不一致，iOS WebView 几乎无视。
必须写全三件套：position: fixed、bottom: 0、left: 0（或 right: 0），缺一不可。只写 position: fixed 和 bottom: 0，元素会默认贴左上角，实际位置是 (0, 0)，不是底部。
- 高度建议用固定值（如
56px），不用100vh或百分比——Safari 地址栏收放时会导致跳变 - 务必给
body加padding-bottom，值等于悬浮条高度，否则正文最后一段会被遮住 - 避免在悬浮条内部放
<input>或<textarea>，iOS Safari 键盘弹出后容易错位
防遮挡：padding-bottom 必须匹配高度
body { padding-bottom: 56px } 看似简单，但新手常漏掉或写错单位。这个值不是“大概估”，必须和悬浮条的 height 完全一致（包括 border、padding）。如果悬浮条用了 box-sizing: border-box，那 padding-bottom 就只看 height 值；如果没设，就得把内边距和边框加进去。
- 不要用
margin-bottom替代padding-bottom—— margin 无法撑开 body 高度，内容仍可能被遮 - 如果悬浮条高度响应式变化（比如根据屏幕宽度缩放），
padding-bottom也得用媒体查询同步调整，不能只靠 JS 动态改 - 某些 CMS 或框架会在
body外自动包裹一层容器，此时要确认padding-bottom是加在真正最外层的滚动容器上
z-index 和层级陷阱
z-index: 999 足够，别盲目堆到 99999。过高的值容易和弹窗、广告 SDK 冲突，反而导致点击穿透或显示异常。
立即学习“前端免费学习笔记（深入）”；
- 确保悬浮条父级没触发新层叠上下文（比如
transform、filter、perspective）——这些会让z-index失效，悬浮条被意外压在下面 - 如果页面有 sticky header，检查
bottom: 0是否和它的z-index形成覆盖关系；必要时统一用z-index: 1050这类中间值 - 移动端微信 WebView 中，某些第三方插件会强制重置
z-index，测试时务必真机验证，不能只信 Chrome DevTools 模拟
移动端适配关键细节
固定底部在移动端不是“写完就跑”，几个细节能决定是否可用：
- 宽度用
width: 100%或max-width: 750px，别用width: auto——窄屏下可能撑出横向滚动条 - 加
box-shadow或明显边框，纯色块在复杂背景上极易看不见 - 慎用
user-scalable=no的<meta viewport>来“修复”闪动——它破坏可访问性，且 WCAG 1.4.4 明确反对 - 如果悬浮条含图标或文字，字号别用
rem单位直接套根字体，iOS Safari 缩放时可能渲染异常；优先用px或em
最易被忽略的是：fixed 元素不占文档流，主内容不会自动“让位”，padding-bottom 是唯一可控的避让手段。JS 动态计算高度或监听 resize 事件，对新手来说既没必要，又容易引入滚动抖动或内存泄漏。
