React侧边栏被背景图遮挡、覆盖导航栏标题的问题求助

问题1：侧边栏被背景图遮挡 #

核心是层级定位逻辑错误，按以下步骤修复：

• 给背景图添加固定定位和明确层级，确保它稳定在底层且不消失：

.backgroundImage {
  background-image: url('assets/dog.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: blur(2px);
  height: 100vh;
  width: 100%;
  position: fixed; /* 固定在视口，避免脱离文档流消失 */
  z-index: 1; /* 设置底层层级 */
  top: 0;
  left: 0;
}

• 修正侧边栏的定位和层级，确保它在背景图上方：

.nav-menu {
  background-color: #060b26;
  width: 250px;
  height: 100vh;
  display: flex;
  justify-content: center;
  position: fixed; /* 保持fixed，确保在视口层级 */
  top: 0;
  left: -100%;
  transition: 850ms;
  z-index: 10; /* 层级高于背景图 */
}

.nav-menu.active {
  left: 0;
  /* 移除position: absolute，保留fixed即可 */
  transition: 350ms;
}

原理：z-index仅对有定位（fixed/absolute/relative/sticky）的元素生效，给背景图设fixed后，它会稳定在视口底层，侧边栏用更高的z-index就能覆盖在上方。

问题2：侧边栏切换时导航栏标题被覆盖 #

通过过渡动画和状态联动实现标题位移：

1. 给导航栏添加过渡效果，让移动更平滑：

.navbar {
  align-items: center;
  background-color: #060b26;
  color: white;
  display: flex;
  height: 80px;
  justify-content: start;
  text-align: right;
  transition: padding-left 350ms ease; /* 匹配侧边栏的过渡时长 */
}

2. 在React组件中用状态控制导航栏的位移：
   假设组件内有控制侧边栏的状态isSidebarOpen，给导航栏加动态类：

<nav className={`navbar ${isSidebarOpen ? 'sidebar-open' : ''}`}>
  <div className="menu-bars">...</div>
  <h1 className="title">你的标题</h1>
</nav>

3. 添加对应的CSS规则，让标题随侧边栏展开移动：

.navbar.sidebar-open {
  padding-left: 250px; /* 侧边栏的宽度，让标题移到侧边栏右侧 */
}

或者直接调整标题的margin：

.navbar.sidebar-open .title {
  margin-left: 250px;
}

这样侧边栏切换时，标题会跟着平滑移动，不会被覆盖。

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