页脚被内容遮挡不是position: fixed写错，而是未给主体留底部占位；需设内容容器padding-bottom≥页脚高度，页脚加left/right: 0防偏移，避免父元素transform触发新层叠上下文，移动端慎用vh，推荐flex或grid实现自然沉底。
页脚被内容遮挡，position: fixed 没生效？
常见现象是页脚贴在视口底部，但页面内容变长后，页脚直接盖在文字上——这不是 position: fixed 写错了，而是没给主体内容留出「底部占位」。fixed 会让元素脱离文档流，浏览器根本不会为它预留空间。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须给
<main></main>或内容容器加padding-bottom，值至少等于页脚高度（比如padding-bottom: 60px） - 页脚本身设
height: 60px（或min-height），和padding-bottom对齐，避免高度波动导致遮挡 - 别只靠
bottom: 0，要同时加left: 0和right: 0，否则在缩放或某些移动端下可能偏移
滚动时页脚卡在半空，bottom: 0 失效？
这是典型的父容器有 transform、perspective 或 filter 导致的「新层叠上下文」问题。一旦触发，fixed 元素会相对于该父容器定位，而不是视口。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查页脚最近的有样式的祖先元素，用开发者工具看是否带
transform: translateZ(0)、filter: blur(1px)等属性 - 临时移除这些样式验证；若必须保留，改用
position: sticky+bottom: 0替代（兼容性需查sticky支持表） - 避免在
body或html上写transform，它们会直接影响所有fixed子元素
移动端 Safari 里页脚跳动或不贴底？
iOS Safari 在地址栏收起/展开时会改变视口高度，但 fixed 元素不会自动重算 bottom，导致页脚悬空或压进内容区。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
vh单位做页脚高度（如height: 10vh），它在 Safari 中会随地址栏变化剧烈抖动 - 用固定像素值（
height: 56px）+ JavaScript 监听resize事件微调padding-bottom（仅必要时） - 加
viewportmeta 的viewport-fit=cover并配合env(safe-area-inset-bottom)处理刘海屏（如padding-bottom: calc(56px + env(safe-area-inset-bottom))）
想让页脚「自然沉底」但又不固定，该选 flex 还是 grid？
如果不需要页脚始终可见（即内容短时沉底、长时随内容滚动到底部），position: fixed 就是错方向——它天生就是「永远钉住」，不是「弹性沉底」。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex+flex-direction: column在body或主容器上，再给内容区加flex: 1，页脚自然被挤到底部 -
display: grid更简洁：设grid-template-rows: 1fr auto，内容区占满剩余空间，页脚固定高度 - 两者都比
fixed更易维护，且无遮挡、无 Safari 跳动、无层叠上下文陷阱
真正难的不是写对 bottom: 0，而是判断「到底要不要 fixed」——多数所谓「固定页脚」需求，其实只是希望内容短时页脚沉底，这时强行用 fixed 反而要填一堆坑。
