Header与Sidebar间距问题：侧边栏top属性设置引发重叠及滚动留白异常

AI 小北

2026-9-28

问题根源

侧边栏使用fixed固定定位时，默认相对于浏览器视口定位，原代码中Header未设置固定定位，属于普通文档流元素，占据页面顶部高度，因此侧边栏top设为0时会和Header重叠；你设置的top:10未带单位，属于无效CSS属性，浏览器不会正确解析，滚动时Header随页面上移，fixed定位的侧边栏位置不变，就会出现顶部留白。
主内容区未预留Header高度，会被Header遮挡。

修改步骤

1. 给Header添加固定定位，保证导航栏常驻顶部不随滚动移动

找到CSS中header .navbar选择器，新增3行属性：

header .navbar {
  font-size: 15px;
  background-image: linear-gradient(260deg, #c16ecf 0%, #2376ae 100%);
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 5px;
  /* 新增开始 */
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  /* 新增结束 */
}

2. 修正侧边栏的top与高度属性

找到CSS中.sidebar选择器，修改top和height属性：

.sidebar {
  position: fixed;
  left: 0;
  top: 62px; /* 替换原无效的top:10，62px为Header实际高度 */
  height: calc(100% - 62px); /* 替换原height:100%，避免侧边栏底部超出视口 */
  width: 78px;
  background: #11101D;
  padding: 2px 14px;
  z-index: 99;
  transition: all 0.5s ease;
}

3. 给主内容区添加顶部边距，避免被Header遮挡

找到CSS中.home-section选择器，将原有top:0替换为margin-top：

.home-section {
  position: relative;
  min-height: 100vh;
  margin-top: 62px; /* 替换原top:0 */
  left: 78px;
  width: calc(100% - 78px);
  transition: all 0.5s ease;
  z-index: 2;
}