我試圖通過CSS將我的自定義漢堡菜單按鈕的z索引更改為1250，因為AppBar和Drawer的z索引分別為1100和1200，但沒有成功。

這是JSX:

<AppBar position='sticky'>
          <Container maxWidth='xl'>
                    <Toolbar>
                        <Box>
                            <label className='menu_container' htmlFor='check'>  // this is my custom menu button container
                                    <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;
}

我想要這樣的結果:

當菜單關閉時

當菜單打開時