Mat-autocomplete 和 mat-select 重叠我的标题

Question

<mat-autcomplete> and <mat-select> are overlaying my header. I have a sticky header and if I'm opening mat-autocomplete or mat-select and I'm scrolling, the list is overlaying the header. I saw that the content is in a div cdk-overlay-container. I've tried to use a bigger z-index for header but not works.

Answer 1

Here it is: below I just want to make the slide toggle to not be covered by the panel. So I applied a class to its div container ( my-class ).

.my-class {
  position: relative;
  z-index: 2000;
  background-color: blue;
  color: white;
}

z-index must be higher than 1000 ( @angular/cdk/overlay 's default z-index).

position: relative is important here, as, per css docs (w3schools):

z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).

<form class="example-form">
    <mat-form-field class="example-full-width">
        <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
        <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
        <span>{{state.name}}</span> |
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

  <br>

  <div class="my-class">
    <mat-slide-toggle 
      [checked]="stateCtrl.disabled"
      (change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()">
      Disable Input?
    </mat-slide-toggle>
  </div>
</form>