为什么我的<main>元素堆叠在<nav>导航上方？该如何解决

导航栏与主体堆叠问题修复 #

首先排查最常见的3种诱因，对应解决方案如下：

• 导航栏设置了position: fixed/position: absolute脱离文档流
  这类定位会让导航栏不占用正常文档流高度，主体内容自然会从页面顶部开始渲染，出现堆叠。
  修复方案1：给主体内容添加上边距，数值与导航栏高度一致

  nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; /* 按你的实际导航高度调整 */
  }
  main {
    margin-top: 60px; /* 和导航高度保持相同 */
  }
  

  修复方案2：替换为position: sticky定位，不需要额外调整边距，导航栏不脱离文档流且滚动时可以吸附在顶部

  nav {
    position: sticky;
    top: 0;
    width: 100%;
  }
  

• 导航栏内部元素使用了float属性导致父元素高度塌陷
  浮动会让父容器无法被子元素撑开，高度变为0，主体内容就会向上偏移和导航重叠。
  修复方案：给导航栏添加清除浮动样式

  nav::after {
    content: "";
    display: block;
    clear: both;
  }
  

• 父容器设置了Flex/Grid布局，排版方向配置错误
  若导航栏和主体的公共父容器设置了display: flex，默认排版方向为横向，空间不足时就会出现堆叠。
  修复方案：修改父容器排版方向为纵向

  /* 假设导航和主体的父容器为body，按实际结构调整选择器即可 */
  body {
    display: flex;
    flex-direction: column;
  }
  

页脚位置异常修复 #

根据你要实现的效果选择对应方案：

• 需求为页脚始终固定在页面最底部（内容不足时也在底部，内容超过一屏时跟随内容在末尾）

  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  main {
    flex: 1; /* 自动占满除导航、页脚外的所有剩余高度 */
  }
  

• 页脚是被上方浮动元素影响出现偏移
  直接给页脚添加清除浮动属性即可

  footer {
    clear: both;
  }
  

内容的提问来源于stack exchange，提问作者Atthoriq Pangestu