如何避免滚动时mat-options覆盖固定的mat-toolbar头部？

问题根源 #

Angular Material的mat-autocomplete面板默认通过Overlay容器挂载到<body>标签下，不属于组件内部DOM结构，因此页面内mat-toolbar的z-index设置无法约束它的层级，导致滚动时面板覆盖头部。

可行解决方案 #

方案1：修改autocomplete面板挂载容器 #

将面板挂载到组件内部容器，让它的层级受父元素约束：

1. 模板中给包含autocomplete的区域添加模板引用：

<div #autoContainer>
  <mat-form-field>
    <input type="text" 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>
</div>

2. 组件类中调整Overlay的挂载目标：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import { MatAutocomplete } from '@angular/material/autocomplete';

@Component({
  selector: 'app-autocomplete-overview',
  templateUrl: './autocomplete-overview-example.html',
  styleUrls: ['./autocomplete-overview-example.css']
})
export class AutocompleteOverviewExample implements AfterViewInit {
  myControl = new FormControl('');
  options: string[] = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten'];
  filteredOptions: Observable<string[]>;

  @ViewChild('autoContainer') autoContainer!: ElementRef;
  @ViewChild('auto') autocomplete!: MatAutocomplete;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value || '')),
    );
  }

  ngAfterViewInit() {
    const overlayRef = this.autocomplete.overlayRef;
    if (overlayRef) {
      // 将面板挂载到指定容器内
      overlayRef.hostElement.style.position = 'relative';
      this.autoContainer.nativeElement.appendChild(overlayRef.hostElement);
    }
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(option => option.toLowerCase().includes(filterValue));
  }
}

方案2：全局调整Overlay层级 #

如果不需要单独控制单个autocomplete，可通过全局CSS修改Overlay容器的层级，让它低于头部：

/* 全局样式文件（如styles.css）中添加 */
.cdk-overlay-container {
  z-index: 999 !important; /* 小于mat-toolbar的z-index值 */
}

.mat-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* 确保高于Overlay容器 */
}

⚠️ 注意：此方案会影响所有使用Overlay的Material组件（如下拉框、对话框），若有其他组件需要更高层级会引发冲突，优先选方案1。

补充：避免主体内容被头部遮挡 #

给页面主体设置上外边距，匹配头部高度：

body {
  margin-top: 64px; /* 可根据实际toolbar高度调整 */
}

内容的提问来源于stack exchange，提问作者watafu.hibiki