Ng bootstrap 下拉菜单不在前面

Question

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

这就是现在的样子：

我还没有设法让 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>

阻塞中的组件通常看起来像 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 放在下拉列表下方。我当然想把标题和下拉菜单放在所有东西的前面——而不是把所有东西放在后面。但这似乎与我的标题结构有关。

更新 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，因为当下拉内容变大时，它的宽度被修改了。

Answer 2

首先，您应该获得下拉菜单。我会假设它是

<div ngbDropdownMenu class="my-dropdown" aria-labelledby="DropdownBasic1">

因为它有一个指令属性并且你试图设置它的样式。

在此元素上，您必须检查其position 是否为除static 或initial 之外的所有内容。

检查完后，您可以修改此元素的 z-index

.my-dropdown { z-index: 9999 !important; }

但是你需要看到的是你的组件是否被封装。您可以在装饰@Component 中看到它。如果你没有看到ViewEncapsulation.none，那么你的组件被封装了。

这意味着它将为您的组件标签添加自定义属性，因此会删除您尝试应用的一些样式（我还没有弄清楚哪些样式）。

在这种情况下，您需要将您的类放入您的根样式中，通常为style.css（或scss 或更少）。

之后，它应该像魅力一样工作！