CSS头部固定后内容被遮挡怎么解决

CSS中fixed定位的头部会遮挡下方内容，根本原因在于它脱离了文档流，导致后续元素无法自动为其预留空间；最直接有效的解决方案是为body或主容器设置与头部高度一致的padding-top（推荐配合CSS变量实现自适应维护），而当头部高度动态变化时可辅以JavaScript精确获取并注入高度值，同时需注意避免误用margin-top引发外边距合并、禁用height:100%干扰计算，以及合理控制z-index层级——本质上，90%的遮挡问题都源于忽略了fixed元素“不占布局空间”这一核心特性，而非单纯的层叠顺序错误。

为什么 fixed 头部会遮挡下面的内容

因为 position: fixed 的元素脱离文档流，后续内容会“无视”它原本占据的空间，直接从页面顶部开始渲染，导致被盖住。这不是 z-index 层级问题，而是布局流缺失造成的——z-index 控制的是“谁在上面”，而这里的问题是“下面的内容根本没给自己留位置”。

给 body 或主容器加 padding-top 补偿高度

最直接的解法：让主体内容主动“下移”，腾出头部高度的空间。关键是要和 fixed 头部的高度严格一致。

• 如果头部高度固定（比如 60px），直接设 body { padding-top: 60px; }
• 如果头部用 vh、rem 或 flex 自适应，padding 值必须同步变化；CSS 变量可简化维护：

  :root {
    --header-height: 60px;
  }
  header {
    position: fixed;
    top: 0;
    height: var(--header-height);
  }
  body {
    padding-top: var(--header-height);
  }

• 注意：不要用 margin-top 替代 padding-top，否则可能引发外边距合并或滚动条异常

用 margin-top 配合 calc() 动态规避（适合 header 高度不确定）

当头部高度由内容撑开、或响应式中频繁变化时，padding 不好同步。此时可在第一个内容区块上用 margin-top 推开：

• 给紧接在 header 后面的主内容区（如 .main）加：

  .main {
    margin-top: calc(100vh - 100%); /* 利用视口与文档高度差粗略估算 */
    /* 更稳妥的做法是 JS 注入实际高度 */
  }

• 但纯 CSS 很难精确获取动态高度，推荐配合 JS 获取 header.offsetHeight 后写入 style.marginTop 或 CSS 变量
• 避免对 html 或 body 设置 height: 100%，否则 100vh - 100% 计算会失效

检查是否误用了 top: 0 + z-index 覆盖了 scroll 区域

有时内容没被遮，而是滚动时头部盖住了本该露出的部分——这往往是因为 header 的 z-index 过高，且父容器没形成新的层叠上下文，导致它压在所有内容之上。

• 确认 header 的 z-index 是合理最小值（如 100），而非 9999
• 确保主内容区的父容器（如 .container）有 position: relative 和足够大的 z-index（比如 10），否则它默认属于 z-index: auto 层，必然被 fixed 元素覆盖
• 不要依赖“反正我 z-index 更大”来掩盖布局缺陷；先解决 padding/margin 缺失，再调 z-index

真正麻烦的不是 fixed 本身，而是忘了它不占空间这个基本事实。多数遮挡问题，补 padding 就能解决；剩下那些，往往是因为在 JS 操作 DOM 后没重新计算高度，或者用 transform 移动了 header 却没同步更新预留空间——这些细节比 z-index 更容易被忽略。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS头部固定后内容被遮挡怎么解决》文章吧，也可关注golang学习网公众号了解相关技术文章。