Как сделать, чтобы меню было поверх всего?

Я пытаюсь создать меню, которое занимает 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>
(I did not add all the CSS to do with the menu and header because the rest of it is irrelevant.)

Как переместить menu, чтобы оказаться наверху?

С предоставленными фрагментами все просто складывается вертикально без каких-либо перекрывающихся областей. Обязательно укажите минимальный воспроизводимый пример кода.

Bumhan Yu 06.05.2022 22:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
40
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я считаю, что проблема заключается в позиции и z-индексе вашего .menu и заголовка css. Попробуйте сделать position: absolute для обоих абсолютных и измените z-индекс меню на 1 и заголовок на 2, чтобы он отображал меню поверх заголовка.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Спасибо, это сработало! Мне просто нужно было сделать это абсолютным для обоих.

tices 06.05.2022 23:50

Очень рад, что смог помочь!

Cdawg_2021 07.05.2022 00:54
Ответ принят как подходящий

Я думаю, что position: relative не установлен должным образом, он должен быть только у родителя, который содержит как header, так и nav. Затем установите следующий css:

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

Добавьте поля и фон, если хотите.

Теперь nav должен быть выше header.

Спасибо, это сработало хорошо. В конце концов, мне не нужен был z-index.

tices 06.05.2022 23:51

Не за что :) Действительно z-index не нужно с этим решением.

paulin-crtn 07.05.2022 07:52

На самом деле, я закончил тем, что добавил z-index: 1, потому что, если бы я этого не сделал, он отображался бы только поверх header не все, но мне не нужно было добавлять z-index к чему-либо еще, только к разделу nav. Это будет работать независимо от того, была ли позиция fixed или absolute.

tices 07.05.2022 11:58

Другие вопросы по теме