直接给body加padding-bottom且值不小于悬浮条渲染高度，是唯一无需JS、兼容性最好且能真正避开遮挡的解法；因fixed元素脱离文档流，后续内容从视口底部起点渲染，导致被遮挡。
直接给 body 加 padding-bottom，值不小于悬浮条渲染高度，这是唯一无需 JS、兼容性最好、且能真正避开遮挡的解法。
为什么 position: fixed; bottom: 0 一定遮内容
它让元素完全脱离文档流，浏览器不会为它预留空间。后续内容从视口底部“起点”开始渲染，而悬浮条就压在那个位置上——不是盖不住，是内容根本没被安排到它上面去。
常见错误现象：footer 看似贴底了，但滚动到底部时最后一行文字/按钮被截断、点不到；iOS Safari 键盘弹出后，悬浮条卡在半空还盖住输入框。
-
z-index只控制层叠顺序，不解决空间侵占 -
margin-bottom加在最后一个<p>或<div>上不可靠：响应式下高度变化、DOM 动态插入时失效 - 用
100vh或百分比设悬浮条高度会导致 Safari 地址栏收放时跳变
body { padding-bottom: ... } 怎么写才稳
这个值必须 ≥ 悬浮条在当前设备上的实际渲染高度（像素值），不是设计稿标称值，更不是估算值。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 高度固定为
56px？直接写body { padding-bottom: 56px; } - 要兼容 iPhone 底部安全区？先加
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，再写body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } - 低版本 Safari（15.4 前）不支持
calc()混用env()？降级写两行，后一条会覆盖前一条：padding-bottom: 56px;和padding-bottom: calc(56px + env(safe-area-inset-bottom)); - 别用
min-height或height替代padding-bottom——那会撑高body，破坏滚动行为
悬浮条自身样式三件套缺一不可
只写 bottom: 0 是最常见漏项，会导致横屏、缩放、小屏下错位甚至右侧留白（滚动条出现时）。
-
position: fixed—— 必须，无替代 -
bottom: 0—— 锚定视口底部，不是父容器底部 -
left: 0; right: 0—— 确保水平铺满，防止滚动条挤出右侧空白 - 高度用固定值（如
height: 56px），禁用100vh、%或em -
z-index: 999足够，设太高（如99999）易和弹窗冲突
什么时候不该用 position: fixed
如果你要的是“页脚沉底”——短页面贴视口底、长页面自然落在内容末尾——那 position: fixed 就是误用。此时应改用 Flexbox：
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }-
main { flex: 1; }—— 吃掉所有剩余空间 -
footer { width: 100%; }—— 不需要任何定位 - HTML 结构必须是
<header>→<main>→<footer>顺序，否则flex: 1不生效
真正难处理的不是代码怎么写，而是先分清你要的是“沉底”还是“悬浮”——这两个需求的技术路径完全相反，混用只会反复踩坑。
