Top Menu与Left Side Menu布局求助：解决侧边菜单覆盖顶部菜单

核心问题分析 #

左侧菜单展开后覆盖顶部菜单，本质是层级优先级（z-index）冲突或定位起始位置错误导致的。以下是针对性修复方案：

方案1：调整z-index层级，确保顶部菜单始终在上 #

修改top_menu.css #

给顶部菜单设置更高的z-index，保证其层级优先：

.top-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* 设为远高于左侧菜单的值 */
  /* 保留原有样式 */
}

修改left_sidemenu.css #

给左侧菜单设置更低的z-index：

.left-sidemenu {
  position: fixed;
  z-index: 900; /* 低于顶部菜单的z-index */
  /* 保留原有样式 */
}

方案2：定位左侧菜单时避开顶部菜单高度 #

让左侧菜单从顶部菜单的底部开始定位，从根源避免向上覆盖：

静态高度场景（顶部菜单高度固定） #

在left_sidemenu.css中直接设置top值：

.left-sidemenu {
  position: fixed;
  top: 60px; /* 替换为你的顶部菜单实际高度 */
  left: 0;
  /* 保留原有样式 */
}

动态高度场景（顶部菜单高度不固定） #

在left_sidemenu.js中添加动态计算代码：

// 页面加载时设置左侧菜单top值
window.addEventListener('load', () => {
  const topMenu = document.querySelector('.top-menu');
  const sideMenu = document.querySelector('.left-sidemenu');
  if (topMenu && sideMenu) {
    sideMenu.style.top = `${topMenu.offsetHeight}px`;
  }
});

// 窗口尺寸变化时重新计算（可选）
window.addEventListener('resize', () => {
  const topMenu = document.querySelector('.top-menu');
  const sideMenu = document.querySelector('.left-sidemenu');
  if (topMenu && sideMenu) {
    sideMenu.style.top = `${topMenu.offsetHeight}px`;
  }
});

可选优化：避免页面内容被固定菜单遮挡 #

如果页面主体内容被顶部菜单遮挡，给body添加上边距：

body {
  padding-top: 60px; /* 与顶部菜单高度一致 */
}

验证步骤 #

1. 刷新页面后，检查顶部菜单是否始终显示在最上层
2. 展开左侧菜单，确认其仅在顶部菜单下方区域展开
3. 调整窗口尺寸（若用了动态计算），验证左侧菜单位置是否自动适配

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