Угловое поле matAutocomplete находится ниже компонента начальной загрузки navbar

Question

Я пытаюсь использовать угловой материал matAutocomplete mat-options в загрузчике Navbar, вот мой код

    <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 под navbar. Пример автозаполнения работает нормально, но под начальной загрузкой появляется окно с предложением, как я могу использовать параметр mat в верхней части панели навигации.

Добавление класса .mat-option и свойства z-index css не имеет никакого эффекта.

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

Заранее спасибо

Answer 1

вы можете сделать это двумя способами. единственное, что вам нужно помнить, это то, что если ваш navbar имеет z-index больше 1000, он будет перекрывать раскрывающийся список matAutoComplete.

1. добавьте это в свой файл CSS (предпочтительно)

   .navbar{
   

   z-индекс: 1000; }

2. или это в ваш файл CSS

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

Answer 2

Вам необходимо добавить CSS z-index в разделе css вашего компонента, как показано ниже

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