如何将顶部栏下拉菜单堆叠在导航栏顶部?

Question

>我有一个导航栏，上面有一个小顶栏。此顶栏有一个带有下拉菜单的下拉按钮。如何使此下拉列表显示在导航栏顶部？我无法更改导航栏或顶栏上的position:fixed;，因为这两者已对齐。

更改其中任何一个<div>项的z-index:x;属性不起作用，将一个元素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>

Answer 1

已解决

通过将<div class="topbar"></div>和<div class="navbar"></div>放置在具有属性position:fixed;的<div></div>中并删除顶栏和导航栏中的固定位置，可以解决此问题。