如何在MUI React中让汉堡菜单按钮置于AppBar与Drawer之上？

问题概述 #

尝试将自定义汉堡菜单按钮的z-index设为1250（已知AppBar和Drawer的z-index分别为1100和1200），但按钮仍被打开的Drawer遮挡，无法显示在最上层。

相关代码 #

JSX结构：

<AppBar position='sticky'>
  <Container maxWidth='xl'>
    <Toolbar>
      <Box>
        <label className='menu_container' htmlFor='check'>
          <input
            type='checkbox'
            id='check'
            checked={menuOpen}
            onChange={() => {
              setMenuOpen(prev => !prev)
            }}
          />
          <span></span>
          <span></span>
          <span></span>
        </label>
        <Drawer
          anchor='left'
          open={menuOpen}
          onClose={() => setMenuOpen(false)}
        >
          hello world from drawer
        </Drawer>
      </Box>
    </Toolbar>
  </Container>
</AppBar>

CSS样式：

.menu_container {
    display: flex;
    flex-direction: column;
    width: 30px;
    cursor: pointer;
    position: relative;
    z-index: 1250;
}

问题原因 #

.menu_container位于AppBar内部，而AppBar的position: sticky会创建独立的堆叠上下文。此时设置的z-index:1250仅在AppBar的堆叠上下文内生效，无法突破到全局层级。而Material UI的Drawer默认是position: fixed，属于全局堆叠上下文，其z-index:1200会覆盖AppBar及内部元素的层级，导致按钮被遮挡。

解决方案 #

方案1：将按钮转为全局堆叠上下文元素 #

修改CSS，把按钮的position改为fixed，使其脱离AppBar的堆叠上下文，同时调整位置匹配原布局：

.menu_container {
    display: flex;
    flex-direction: column;
    width: 30px;
    cursor: pointer;
    position: fixed; /* 切换为fixed，进入全局堆叠上下文 */
    top: 1rem; /* 根据你的AppBar高度调整，确保位置正确 */
    left: 1rem;
    z-index: 1250;
}

方案2：优化组件结构+层级 #

将Drawer移出AppBar的DOM结构（更符合组件逻辑），同时保持按钮的全局层级设置：

1. 调整JSX结构：

<AppBar position='sticky'>
  <Container maxWidth='xl'>
    <Toolbar>
      <Box>
        <label className='menu_container' htmlFor='check'>
          <input
            type='checkbox'
            id='check'
            checked={menuOpen}
            onChange={() => setMenuOpen(prev => !prev)}
          />
          <span></span>
          <span></span>
          <span></span>
        </label>
      </Box>
    </Toolbar>
  </Container>
</AppBar>
{/* Drawer移到AppBar外部 */}
<Drawer
  anchor='left'
  open={menuOpen}
  onClose={() => setMenuOpen(false)}
>
  hello world from drawer
</Drawer>

2. 保持方案1中的CSS修改即可。

额外检查 #

• 用浏览器开发者工具（F12）查看Drawer的实际z-index，确认是否为1200（部分主题配置可能修改默认值）。
• 确保按钮的span元素样式没有被其他CSS覆盖，比如是否设置了冲突的z-index或position。

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