顶部固定栏导致内容被遮盖，应通过给body或主容器设置padding-top预留空间；padding-top在内容区内撑开空白，避免遮挡且保持滚动正常，禁用html padding和margin-top推首元素。
顶部固定栏（position: fixed）会脱离文档流，导致页面内容从顶部开始渲染，被遮盖。解决方法不是“把内容往下推”而是“给主体预留出顶部空间”，最常用、最稳妥的方式就是给 body 或主容器 设置 padding-top，值等于固定栏的高度。
为什么 padding-top 能解决问题
固定定位的元素不占布局空间，浏览器会把页面内容“顶上去”。加 padding-top 是在内容区域内部撑开空白，让第一屏可见内容自然下移，视觉上避开遮挡，同时保持滚动行为正常（不会出现顶部留白或跳动）。
具体操作步骤
- 确认顶部固定栏高度（比如 60px），建议用 CSS 变量或注释标出，方便后续维护
- 给
body或最外层内容容器（如.main、#app）设置padding-top: 60px - 若固定栏有
z-index，确保内容区域不被意外覆盖（一般不用额外调） - 移动端需注意：避免用
vh单位计算高度，因 Safari 等浏览器地址栏缩放会影响视口高度；优先用固定 px 值或clamp()适配
常见踩坑提醒
- 别给
html加padding-top—— 它可能触发全局滚动条偏移或 Safari 下的回弹异常 - 别只靠
margin-top推第一个元素 —— 滚动时顶部仍可能露底，且响应式易错乱 - 如果用了 CSS-in-JS 或框架（如 Vue/React），确保样式作用域正确，避免 padding 被覆盖
- 配合
box-sizing: border-box（推荐设在*, *::before, *::after）可避免 padding 影响宽度计算
进阶小技巧：响应式固定栏高度
如果顶部栏在手机和桌面高度不同（比如桌面 72px、手机 56px），可用媒体查询动态调整：
body { padding-top: 72px; }
@media (max-width: 768px) {
body { padding-top: 56px; }
}
或者用 CSS 自定义属性 + JS 监听 resize（适合动态高度场景，如含下拉菜单的导航栏）。
立即学习“前端免费学习笔记（深入）”；
