CSS | Flexbox 容器重叠在导航nav容器上方问题求助

根本原因 #

导航元素nav应用了position: fixed固定定位规则，该规则会使元素脱离正常文档流，不会在页面中占据实际排布空间，因此后续的Flex容器会从视口顶部开始渲染，直接和导航区域发生重叠。

可落地修复方案 #

• 方案一：给Flex容器设置和导航高度匹配的上外边距
  直接给重叠的Flex容器添加上边距，数值完全匹配导航的实际渲染高度即可：

  .your-flex-container-class {
    margin-top: 64px; /* 此处64px替换为你的导航实际高度 */
  }
  

• 方案二：通过占位父容器避免硬编码高度
  给nav元素包裹一层额外的父容器，给父容器设置和导航等高的高度属性，由父容器占据文档流中的位置，后续Flex容器会自动排布在父容器下方，无需手动给Flex容器加边距：

  <div class="nav-wrapper">
    <nav>你的导航内容</nav>
  </div>
  

  .nav-wrapper {
    height: 64px; /* 与导航高度一致 */
  }
  nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
  }
  

• 层级修复补充：如果调整位置后仍出现导航被Flex容器遮挡的情况，给导航添加更高的层级规则即可：

  nav {
    z-index: 999;
  }
  

内容的提问来源于stack exchange，提问作者doron hine