Navbar与Sidebar重叠问题：实现侧边栏覆盖导航栏或调整其尺寸

数据老陈

2026-6-17

解决方案：侧边栏覆盖导航栏或导航栏自适应调整

方案一：让侧边栏覆盖导航栏

核心是调整z-index层级——你的侧边栏当前z-index为1，而Bootstrap固定导航栏默认z-index更高，导致侧边栏被遮挡。只需给侧边栏设置更高的z-index，同时确保导航栏层级低于它：

修改CSS：

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1031; /* 高于Bootstrap固定导航栏默认的1030 */
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.navbar.stick {
  position: fixed;
  top: 0;
  left: 0;
  opacity: .85;
  z-index: 1029; /* 低于侧边栏的z-index */
}

方案二：让导航栏自适应侧边栏宽度

当侧边栏展开时，同步调整导航栏的边距，让它避开侧边栏区域：

1. 更新JavaScript逻辑

function openNav() {
  const sidebar = document.getElementById("Sidebar");
  const navbar = document.querySelector(".navbar");
  sidebar.style.width = "300px";
  navbar.style.marginLeft = "300px";
  // 若存在main区域，同步调整保持布局一致
  document.getElementById("main")?.style.marginLeft = "300px";
}

function closeNav() {
  const sidebar = document.getElementById("Sidebar");
  const navbar = document.querySelector(".navbar");
  sidebar.style.width = "0";
  navbar.style.marginLeft = "0";
  document.getElementById("main")?.style.marginLeft = "0";
}

2. 添加过渡动画（可选）

让导航栏的宽度调整更平滑，给导航栏添加过渡属性：

.navbar {
  border-width: 1px 0;
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
  width: 100%;
  margin-top: 20%;
  transition: margin-left 0.5s ease; /* 和侧边栏过渡时长保持一致 */
}