隐藏在卡片和填充物后面的导航栏下拉菜单

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 索引 像这样，

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

Answer 2

由于 z-index，您面临此问题。如果你想在前面显示下拉菜单，那么你可以增加它的 z-index，这样它就不会隐藏在任何卡片后面。确保 z-index 大于任何其他可能隐藏下拉菜单的元素。您可以在此处阅读更多相关信息。

Answer 3

对我来说，导航标签上的类粘顶是解决办法