Как получить выпадающее меню под фиксированной панелью навигации, с z-index - PullRequest
Новая
       40

Как получить выпадающее меню под фиксированной панелью навигации, с z-index

0 голосов
/ 30 марта 2020

Я пытаюсь получить содержимое выпадающего меню до go 'под' фиксированной панелью навигации и пытаюсь понять, где я иду не так. (Конечная цель состоит в том, чтобы «вытащить» его из-под панели навигации в анимации, но эта часть еще не актуальна).

Вот краткий обзор соответствующего кода для этой задачи: jsfiddle

Более подробно, я установил фиксированное позиционирование как на самой панели навигации, так и на выпадающем содержимом. Не входя в состояния при наведении, любой дочерний контент в панели навигации, кажется, go выше, независимо от z-индекса. 

<body>
  <div id="navbar">
    <nav>
      <div class="nav-item">
        <button>Dropdown Link</button>
        <div class="mega">
          <h2>Some menu stuff.</h2>
        </div>
      </div>
    </nav>
  </div>
  <div id="content">
    <h1>Hi, I'm a page!</h1>
  </div>
</body>

#navbar{
  position:fixed;
  z-index: 10;
  width:100%;
  height:100px;
  background-color: black;
  color: white;
  display:flex;
  justify-content: space-between;
  padding-left: 30%;
}
.nav-item{ height: 100%;}
.nav-item > button{
  font-size: 72px;
  height:100%;
  background-color: lightblue;
}
.nav-item > .mega{
  position: fixed;
  left: 0;
  z-index: 5;
  top: 100px;
  transform: translateY(-40px);
  width: 100%;
  height: 200px;
  background-color: grey;
}
.mega{
  padding:50px;
  text-align:center;
}

Если кто-то может увидеть, где я иду не так, или вы можете заставить эту скрипку работать должным образом (выпадающий контент ПОД навигационной панелью, но все еще поверх контента) - ваша помощь будет принята с благодарностью. Спасибо!

...