Question

我的下拉列表目前存在以下重叠问题：

正如您所看到的，如果我按下最右边的按钮（过滤器徽标），然后按下我的下拉链接，它会以丑陋的方式重叠。我希望“下拉链接”下拉列表始终排在最前面。

我尝试过使用两个下拉列表的CSS（z-index，position，display等），但我似乎无法弄明白。根据我的理解，z-index应该解决我的问题，但事实并非如此。所以这就是为什么我去玩位置/显示器等，但这也没有帮助，让我更加困惑。

任何人都知道我做错了什么？真的很感激推动正确的方向。（我对当前代码的其他随机反馈也表示赞赏）

我的代码：

HTML：

<!doctype html>
<html>

<head>
    <title>test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="https://www.test.com"><img class="logoklant" src="images/test.png" alt="Logo"></a>
    <a class="navbar-brand naamdashboard" href="#">test</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav ml-auto menuitems" id="myNavbar">
            <li class="nav-item"><a class="nav-link" href="#page1">Link 1</a></li>
            <li class="nav-item"><a class="nav-link" href="#page2">Link 2</a></li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                Dropdown link
              </a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#test1">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="" id="filter">
                <i class="fas fa-filter filterlogo"></i>
              </a>
              <ul class="dropdown-menu dropdownqlik">
                <div id="CurrentSelections" class="qvobjects">
                  <div class="current-selections-placeholder">
                    <span>Connect to app to see Selection Toolbar</span>
                  </div>
                </div>
              </ul>
            </li>
          </ul>
    </div>
</nav>



</body></html>

CSS：

/* navbar */
.navbar {
    background-color: #3b3b3b;
    font-family: Montserrat, sans-serif;
    font-size: 12px !important;
    letter-spacing: 4px;
}

.navbar-brand {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 5px;
}

.logoklant {
    height:40px;
}

.naamdashboard {
    font: 20px;
}

.filterlogo {
    font-size: 32px;
    margin-left: 5px;
    margin-top: 2px;
    padding-right: 10px;
}

.dropdownqlik {
    height: 36px;
}

#filter.is-active + .dropdown-menu {
  display: block;
  width: 100.1%;
  top:53px;
}

.is-pos-static {
  position: static !important;
  color: white !important;
}

#CurrentSelections {
    margin-top: -8px;
    margin-left:-1px;
}

/* Scroll to top */
.scrollToTop {
    text-align: center;
    font-weight: bold;
    color: #444;
    text-decoration: none;
    position: fixed;
    top: 95vh;
    right: 1vw;
    z-index: 3000;
}

.scrollToTopLogo {
    color: black;
}

JS：

/* https://stackoverflow.com/questions/48243406/change-color-on-hover-and-when-navbar-toggle-is-collapsed */
$(document).ready(function(){

$("#filter").click(function(){
    $(this).parent('li').toggleClass('is-pos-static');
    $(this).toggleClass("is-active");
});



});

感谢您抽出宝贵时间提供帮助。

Answer 1

添加CSS

.dropdown-menu.show {
    z-index: 9999;
}

Navbar下拉列表始终低于其他下拉列表，增加z-index等不起作用

1 个答案: