我如何让菜单放在所有内容的顶部?

Question

我试图有一个菜单，占用100vh时，菜单按钮被点击。然而，我也有一个标题在顶部，所以菜单内容低于它。如何让menu在header上?我试图做到这一点，没有使标题display: none，因为我希望它显示在侧面-在剩余的空间，使menu有一个80vw的view width。

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>

(我没有添加所有的CSS来处理menu和header，因为其余的是无关紧要的。)

我如何移动menu到顶部?

Answer 1

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

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

如果你愿意，可以添加边距和背景。

现在nav应该在header之上。

Answer 2

我认为问题在于。menu和header css的位置和z-index。尝试将位置:absolute设置为绝对，并将菜单的z-index更改为1，将header更改为2，以便在header顶部显示菜单。

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