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

Question

我正在尝试在引导Navbar中使用角形材质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的第一项在导航栏下。 自动完成示例运行正常，但引导框下方出现建议框，如何在导航栏顶部设置mat-option。

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

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

预先感谢

Answer 1

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

1. 将此添加到您的CSS文件（首选）

   .navbar{
   

   z-index：1000；   }

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

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

Answer 2

您需要在组件css部分中添加CSS z-index ，如下所示

.mat-autocomplete-panel{
  z-index: 99999;    
}