为什么我的汉堡菜单隐藏在容器后面？

Question

为什么我的菜单隐藏在主容器后面并且只能通过滚动才能看到？

我尝试过增加 z-index 和更改定位类型等方法，但似乎只有当我增加 nav-container 的 min-height 时才有效。

我尝试使用 onClick 事件监听器和 React hooks 来增加 nav-container 的高度，但我不确定这是否是正确的方法。

我该如何克服这个问题？

这是我的 CSS 代码：

.container {
  max-width: 1050px;
  width: 90%;
  margin: auto;
  outline: 3px solid red;
  background-color: wheat;
  z-index: 30;
  min-height: 100vh;
}

.navContainer {
  display: block;
  position: relative;
  height: 60px;
}

<div style={{ minHeight: hover ? '100vh' : 'auto'}}
     ref={containerRef} className={`${HamburgerCSS.container} ${HamburgerCSS.navContainer}` }>

    <input ref={inputRef} onChange={checkedOrNot} className={HamburgerCSS.checkbox} type="checkbox" name="" id="" />

    <div className={HamburgerCSS.hamburgerLines}>
        <span onClick={handleClick} className={`${HamburgerCSS.line} ${HamburgerCSS.line1}`} />

        <span className={`${HamburgerCSS.line} ${HamburgerCSS.line2}`} />
        <span className={`${HamburgerCSS.line} ${HamburgerCSS.line3}`} />
    </div>

    <div className={HamburgerCSS.logo}>
        <h1>Navbar</h1>
    </div>

    <div className={HamburgerCSS.menuItems}>
      <li><a href="#">Home</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">blogs</a></li>
      <li><a href="#">portfolio</a></li>
      <li><a href="#">contact</a></li>
    </div>
</div>

Answer 1

这种情况很可能发生，因为您要么为汉堡菜单使用第三方库，要么为汉堡菜单或其容器使用绝对定位。您可能想查看这篇关于绝对定位的文章，您也可能想阅读这篇文章 [1]: 位置：绝对元素隐藏在后面的元素后面