html - Ng bootstrap 下拉菜单不在前面

Question

我正在使用 Ng-bootstrap在 Angular 5 项目中。我正在尝试在我的导航标题中创建一个下拉菜单，并且我已经设法让它工作，但是它在我容器中的东西的背景中 - 我当然希望它在前面。

现在是这样的:

我还没有设法让 ng-bootstrap 在 Plunker 中工作，所以我将在这里分享相关代码。这是我的 header.component.html 文件:

<div class="my-header">
<header class="navbar navbar-light navbar-expand-lg">

<a class="navbar-brand" [routerLink]="['/']">HELLO</a>

<button aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right" type="button" (click)="toggleCollapse()">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="navbar-collapse collapse show" [@collapse]="collapse" id="navbarContent">

  <ul class="navbar-nav ml-auto">

    <li class="nav-item">
      <a class="nav-link" [routerLink]="['/main/memberships']">Memberships</a>
    </li>

    <div ngbDropdown placement="bottom-right" class="d-inline-block">
      <li class="nav-item nav-link dropdown my-header-but" id="DropdownBasic1" ngbDropdownToggle>Profile</li>
      <div ngbDropdownMenu class="my-dropdown" aria-labelledby="DropdownBasic1">
        <li class="nav-item">
          <a class="dropdown-item" [routerLink]="['/main/profile']">Your profile</a>
        </li>
        <li class="nav-item">
          <a class="dropdown-item" [routerLink]="['/main/profile']">Paid subscriptions</a>
        </li>
        <li class="nav-item">
          <a class="dropdown-item" [routerLink]="['/main/profile']">Payment history</a>
        </li>
        <button class="dropdown-item" (click)="logOut()">Log out</button>
      </div>
    </div>

  </ul>
</div>

这是我的 app.component.html:

<app-header></app-header>
<router-outlet></router-outlet>

block 中的组件通常看起来像 random.component.html:

 <div class="container">
   <div class="row">
     <div class="col">
       All kinds of content
     </div>
   </div>
 </div>

这是我的自定义 scss:

.my-header {
  padding-left: 0;
  padding-right: 0;
  background-color: $secondary-bg;
  border-bottom-width: 1px;
  border-color: $accent-color;
  box-shadow: 0 12px 5px -10px $black;
}

.my-header-but {
  background-color: transparent;
  border-color: transparent;
  cursor: pointer;
}

.my-dropdown {
  top: 100%;
  background-color: $gray-900;
  box-shadow: 12px 0 15px -7px $black, -12px 0 15px -7px $black, 0 12px 
  15px -7px $black;
  overflow: visible !important;
}

下拉列表中的计算样式如下所示 :

下拉列表前面的元素的样式很简单:

 box-sizing: border-box;
 display: block;

我曾尝试调整不同元素的 z-index，但没有成功。我可以在浏览器中看到样式更改确实应用于元素。那么您将如何继续尝试将其放在前面？如果您需要有关其他任何信息的更多信息，请告诉我。

更新:

我发现使用“col”类更改 z-index 有助于将基础 div 置于下拉列表下方。我当然希望将标题和下拉菜单置于所有内容之前——而不是将所有内容置于其后。但这似乎与我的 header 结构有关。

更新 2:

将 z-index: 1010 添加到:

<div class="navbar-collapse collapse show" [@collapse]="collapse" 
id="navbarContent">

修好了。我不知道为什么它不是那个 z-index，以为 Bootstrap 会解决这个问题。但我现在不会进一步深入。

谢谢大家的回答。

Answer 1

我迟到了，但刚遇到同样的问题。

我通过在下拉列表周围放置相对和绝对容器，并在下拉列表中应用 z-index 来解决这个问题:

<div class="outer">
    <ul class="nav">
        <li class="nav-item" ngbDropdown>
            <a class="nav-link" id="tselect" role="button" aria-haspopup="true" ngbDropdownToggle>
                {{user.company}}
            </a>
            <div class="dropdown-menu dropdown-menu-right" ngbDropdownMenu aria-labelledby="tselect">
                <button ngbDropdownItem>... text ...</button>
            </div>
        </li>
    </ul>
</div>

和组件 SCSS:

.outer {
    position: relative;
    ul.nav {
        position: absolute;
        z-index: 1010;
    }
}

在我的例子中，我不能在 .navbar-collapse 上使用 z-index，因为当这个下拉内容变大时它的宽度被修改了。