固定定位Div渲染层级异常，导航栏被进度条遮挡如何修复？

问题解决方法 #

根因说明 #

两个设置了position: fixed的元素，层叠顺序由z-index属性决定，数值越大越靠上层显示。你的代码中.header类设置了z-index: 1，而.navbar类没有设置z-index，因此默认层叠优先级更低，就算DOM结构写在前面也会被.header（进度条容器）覆盖。另外代码中导航栏闭合后多了一个冗余的</div>标签，属于HTML结构语法错误，建议一并清理。

修改步骤 #

• 给.navbar的CSS样式添加z-index: 2，优先级高于.header的z-index: 1，即可让导航栏显示在进度条上层
• 删除导航栏<div class="navbar"></div>之后多余的</div>标签

修改后的关键CSS代码

/* 调整后的导航栏样式 */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2; /* 新增此行 */
}

如果不想让导航栏盖住进度条，希望两者上下排列展示，可额外调整.header和.main的样式：

.header {
  position: fixed;
  top: 46px; /* 匹配导航栏高度，可根据实际样式调整 */
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}
/* 调整内容区外边距，避免被两个固定元素遮挡 */
.main {
  margin-top: 90px;
}

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