Question

<mat-autcomplete>和<mat-select>覆盖了我的标题。我有一个粘性标头，如果我打开mat-autocomplete或mat-select并且正在滚动，则列表将覆盖标头。我看到内容在div cdk-overlay-container中。我尝试使用较大的z-index作为标题，但不起作用。

Answer 1

在这里是：下面我只想使幻灯片切换开关不被面板覆盖。因此，我将一个类应用于其div容器（my-class）。 https://stackblitz.com/edit/angular-cover-autocomplete?file=app%2Fautocomplete-overview-example.html

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

z-index必须大于1000（@angular/cdk/overlay的默认z-index）。

position: relative在这里很重要，因为根据CSS文档（w3schools）：

z-index仅适用于定位的元素（位置：绝对，位置：相对，位置：固定或位置：粘性）。

<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>

垫自动完成和垫选择与我的标题重叠

1 个答案: