隱藏在卡片和過濾器后面的導航欄下拉菜單

Question

我是初學者，所以我正在嘗試建立一個網站來學習所使用的語言是 Javascript 並面臨下拉菜單隱藏在卡片和過濾器后面的問題，有人面臨同樣的問題嗎？ 這是照片

有什么幫助嗎？

在此處輸入圖像描述

 .dropdown-toggle { cursor: pointer; }

 <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <ng-template #anonymousUser> <li *ngIf="auth.user" class="nav-item"> <a class="nav-link" href="login">login</a> </li> </ng-template> <li *ngIf="auth.user | async as user; else anonymousUser" ngbDropdown class="nav-item dropdown" > <a ngbDropdownToggle class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" > {{ user.displayName }} </a> <ul ngbDropdownMenu class="dropdown-menu" aria-labelledby="navbarDropdown" > <li> <a class="dropdown-item" href="dashboard" aria-labelledby="dropdownMenuButton" >Dashboard</a > </li> <li> <a class="dropdown-item" routerLink="admin/products">Products</a> </li> <li> <a class="dropdown-item" routerLink="admin/publish">publish</a> </li> <li> <a (click)="logout()" class="dropdown-item" href="home">logout</a> </li> </ul> </li> </ul> </div> </div> </nav>

Answer 1

嘗試增加dropdown-menu的 z-index 像這樣，

.dropdown-menu{
    z-index: 2000 !important;
}

Answer 2

由於 z-index，您正面臨此問題。 如果你想在前面顯示下拉菜單，那么你可以增加它的 z-index，這樣它就不會隱藏在任何卡片后面。 確保 z-index 大於任何其他可能隱藏下拉菜單的元素。 你可以在這里閱讀更多關於它的信息。