根本原因是fixed元素脱离文档流，不占空间；须给body或主容器设padding-bottom（值≥footer高度），而非依赖margin-bottom或z-index。
用 position: fixed 时正文被遮住，根本原因是脱离文档流
给 footer 或操作栏加 position: fixed; bottom: 0; 后，它就从正常布局中“消失”了，浏览器不会为它留出空间。滚动时内容直接从它底下穿过，尤其在长页面末尾，最后一段文字大概率被盖住。
解决思路不是改 footer，而是告诉正文：“你别顶到最底下，留点空”。常用手段是给 body 或主容器加 padding-bottom：
-
padding-bottom值必须 ≥ 悬浮条的实际高度（比如56px） - 如果悬浮条高度响应式（如用
rem或媒体查询变化），用calc()更稳妥：padding-bottom: calc(1rem + 4px); - 别只加在
main上——万一main不占满全高，padding 就失效；优先加在body或根级容器上
为什么不能只靠 margin-bottom 或 z-index 补救
z-index 只控制层级，不解决空间占用问题；margin-bottom 对脱离文档流的 fixed 元素无效——它根本不参与 margin 折叠。
常见错误写法：
footer {
position: fixed;
bottom: 0;
}
main {
margin-bottom: 56px; /* 无效：footer 不在文档流里，main 的 margin 不会“推”它 */
}
真正起作用的是容器自身的内边距，因为它是物理占位的：
body {
padding-bottom: 56px; /* ✅ 正文区域底部强制留空 */
}
移动端键盘弹出后悬浮条错位，怎么稳住
iOS Safari 在软键盘唤起时会重算视口高度，position: fixed; bottom: 0; 容易被顶上去或卡在半空，尤其当悬浮条里有 input 或 textarea 时。
- 最简单规避：别在
fixed悬浮条内部放可聚焦表单控件 - 如果必须放，用
position: absolute替代fixed，并确保父容器设position: relative且高度可控 - 监听
resize事件做兜底（但 iOS 键盘弹出不一定触发 resize，可靠性低）
想让页脚“沉底”而不是“悬浮”，别用 fixed
如果你要的是短页面时页脚贴视口底、长页面时自然在内容末尾——那不是悬浮需求，而是 Sticky Footer。这时 position: fixed 是错路，正确解法是 Flexbox：
html, body {
min-height: 100vh;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1; /* 吃掉所有剩余空间 */
}
footer {
/* 不写 position，不写 height，让它自然撑开 */
}
这个方案不遮内容、不依赖 JS、兼容性好，且 header/footer 高度变化时依然可靠。混淆“悬浮”和“沉底”，是踩坑最多的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
