Как разместить выпадающее меню верхней панели в верхней части панели навигации? - PullRequest
Новая
       36

Как разместить выпадающее меню верхней панели в верхней части панели навигации?

0 голосов
/ 23 января 2020

У меня есть панель навигации с крошечной верхней панелью над ней. На этой верхней панели есть выпадающая кнопка с выпадающим меню. Как я могу сделать это выпадающее шоу в верхней части панели навигации? Я не могу изменить position:fixed; на панели навигации или верхней панели, потому что эти два элемента были выровнены.

Изменение свойства z-index:x; для любого из этих элементов <div> не имеет никакого эффекта, а создание одного элемента z-index:x!important; ничего не делает или. Что я могу сделать? 

.topbar {
    margin: 0;
    padding: 0;
    position: fixed;
    z-index: 1!important;
    width: 100%;
    height: 32px;
    background-color: rgba(0,0,0,0.75);
}
.navbar {
    margin-top: 32px;
    width: 100%;
    height: 65px;
    position: fixed;
    z-index: 3!important;
    background-color: rgba(255,255,255,0.75);
    border-top: 2px solid rgba(55,175,75,1.00);
    border-bottom: 5px solid rgba(55,175,75,1.00);
    box-shadow: 0 5px 10px rgba(0,0,0,0.4);
}
.dropdown {
    position: absolute;
    right: 0px;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2!important;
    height: 200px;
}
<div class="topbar" align="center">
  <p>Topbar content and buttons</p>
  <div class="dropdown" align="center">Dropdown content</div>
</div>
<div class="navbar" align="center">Navbar content and buttons</div>

1 Ответ

0 голосов
/ 23 января 2020

Решено

Эта проблема решается путем размещения <div class="topbar"></div> и <div class="navbar"></div> внутри <div></div> со свойством position:fixed; и удаления фиксированной позиции в верхней панели и Navbar.

...