为什么我通过Ajax加载的返回内容会滚动覆盖导航栏？

云原生阿岚

2026-10-4

问题原因

固定定位的导航栏#navv未设置z-index属性，DOM中后渲染的元素（含异步加载的管理员卡片）默认堆叠顺序更高，所以会覆盖导航栏。
代码中重复使用id="mainsec"，HTML规范要求id全局唯一，重复id会导致样式、JS选择器出现不可预期的异常。
#mainsec样式中错误使用width: 100vh，vh为视口高度单位，用于宽度设置会导致页面横向溢出。
无顶部内边距的页面内容会被固定定位的导航栏遮挡起始部分。

修复方案

1. 修改CSS代码

/* 将原id选择器改为class选择器，适配重复使用的场景 */
.mainsec {
  height: 100vh;
  /* 修正宽度单位错误 */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#navv {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  transition: top 0.3s;
  /* 提升导航栏堆叠层级，确保始终在页面内容上方 */
  z-index: 9999;
}
#navv a:hover {
  background-color: rgba(221, 221, 221, 0.568);
  color: black;
}
/* 新增body内边距，避免内容被导航遮挡 */
body {
  padding-top: 70px;
}