我如何获得一个位于所有内容之上的菜单？

Question

我正在尝试创建一个在单击菜单按钮时占用 100vh 的菜单。但是，我在顶部还有一个 header，因此菜单内容低于它。如何让 menu 位于 header 之上？我试图在不制作 header display: none 的情况下执行此操作，因为我希望它显示在侧面 - 在 space 的左侧，使 menu 有一个view width 共 80vw。

header {
  height: 3.4rem;
  display: grid;
  align-items: center;
  z-index: 1;
}

.menu {
  z-index: 2;
  position: relative;
  background-color: #000;
  margin-left: 4rem;
}

.menu-container {
  width: 80vw;
  height: 100vh;
  margin-left: 2.5rem;
  margin-top: 2rem;
}

<header>
  <div class="header-container">
    <div class="left">
      <img src="img/logo.jpg" alt="">
    </div>
    <div class="right">
      <img src="img/user.png" alt="">
      <i class="fa-solid fa-bars fa-xl"></i>
    </div>
  </div>
</header>
<nav class="menu">
  <div class="menu-container">
    <div class="top-menu">
      <a href="">Premium</a>
      <a href="">Support</a>
      <a href="">Download</a>
      <div class="menu-line"></div>
    </div>
    <div class="bottom-menu">
      <a href="">Account</a>
      <a href="">Log out</a>
    </div>
    <img src="img/logo.jpg" alt="">
  </div>
</nav>

（我没有添加与 menu 和 header 相关的所有 CSS，因为其余部分无关紧要。）

如何将 menu 移动到顶部？

Answer 1

我认为问题在于您的 .menu 和 header css 的位置和 z-index。尝试将 position: absolute 设置为 absolute 并将菜单的 z-index 更改为 1 并将 header 更改为 2 以便它在 header.

顶部显示菜单

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Answer 2

我认为 position: relative 设置不正确，它应该只在同时包含 header 和 nav 的父级上。然后设置如下 css :

.menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 80vw;
}

如果需要，可以添加边距和背景。

现在 nav 应该高于 header.

我如何获得一个位于所有内容之上的菜单？

How do I get a menu to go on top of everything?

html

javascript

css

menu

header