时间戳

首页 > 解决方案 > 如何在导航栏顶部堆叠顶部栏下拉菜单？

html - 如何在导航栏顶部堆叠顶部栏下拉菜单？

问题描述

我有一个导航栏，上面有一个小顶栏。此顶栏有一个带有下拉菜单的下拉按钮。如何在导航栏顶部显示此下拉菜单？我无法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>

标签： htmlcsspositionz-index

解决方案

解决了

这个问题是通过将<div class="topbar"></div>and<div class="navbar"></div>放在<div></div>with属性里面position:fixed;并删除topbar和navbar中的固定位置来解决的。

推荐阅读