Как сделать, чтобы меню было поверх всего?
Я пытаюсь создать меню, которое занимает 100vh при нажатии кнопки меню. Однако у меня также есть заголовок вверху, поэтому содержимое меню находится ниже него. Как сделать так, чтобы menu располагался поверх header? Я пытаюсь сделать это, не создавая заголовок display: none, потому что я хочу, чтобы он отображался сбоку — в оставшемся пространстве от того, чтобы 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 and header because the rest of it is irrelevant.)
Как переместить menu, чтобы оказаться наверху?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я считаю, что проблема заключается в позиции и z-индексе вашего .menu и заголовка css. Попробуйте сделать position: absolute для обоих абсолютных и измените z-индекс меню на 1 и заголовок на 2, чтобы он отображал меню поверх заголовка.
Ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Спасибо, это сработало! Мне просто нужно было сделать это абсолютным для обоих.
Очень рад, что смог помочь!
Я думаю, что position: relative не установлен должным образом, он должен быть только у родителя, который содержит как header, так и nav. Затем установите следующий css:
.menu {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 80vw;
}
Добавьте поля и фон, если хотите.
Теперь nav должен быть выше header.
Спасибо, это сработало хорошо. В конце концов, мне не нужен был z-index.
Не за что :) Действительно z-index не нужно с этим решением.
На самом деле, я закончил тем, что добавил z-index: 1, потому что, если бы я этого не сделал, он отображался бы только поверх header не все, но мне не нужно было добавлять z-index к чему-либо еще, только к разделу nav. Это будет работать независимо от того, была ли позиция fixed или absolute.
С предоставленными фрагментами все просто складывается вертикально без каких-либо перекрывающихся областей. Обязательно укажите минимальный воспроизводимый пример кода.