Question

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

现在的样子：

我还没有设法在一个Plunker中使用ng-bootstrap，所以我会在这里分享相关的代码。这是我的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而没有任何运气。我可以在浏览器中看到样式更改确实应用于元素。那么你将如何继续尝试将它放在前面呢？请告知我，您需要有关其他任何内容的更多信息。

更新

我发现用＆＃39; col＆＃39;更改了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; }

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

这意味着它会向组件标记添加自定义属性，因此会删除您尝试应用的某些样式（我还没有找出哪些样式）。

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

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

Ng引导程序下拉列表不在前面

2 个答案: