Mat-autocomplete and mat-select overlapping my header - css

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>