Angular 垫自动完成框位于引导导航栏组件下方

Question

我正在尝试在 bootstrap Navbar 中使用 Angular Material matAutocomplete mat-options，这是我的代码

    <li class="nav-item">
      <form class="example-form">
        <mat-form-field class="example-full-width">
          <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
          <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let option of options" [value]="option">
              {{option}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </form>
    </li>

您可以在快照中看到 mat-options 的第一项在导航栏下。自动完成示例工作正常，但建议框出现在 Bootstrap 下如何在导航栏顶部制作 mat-option。

添加 class .mat-option 和 z-index css 属性无效。

.mat-option{
    z-index: 999;
}

提前致谢

Answer 1

您可以通过两种方式做到这一点。您唯一需要记住的是，如果您的导航栏的 z-index 超过 1000，它将与 matAutoComplete 下拉菜单重叠。

1. 将此添加到您的 CSS 文件(首选)

   .navbar{
   

   z-索引:1000；

2. 或将此添加到您的 CSS 文件

   .cdk-overlay-container{z-index: 10001 ;}