angular - MatTooltip 显示在 html 原生对话框下方

Question

为什么 MatTooltip 显示在 html 原生对话框下面？

import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'tooltip-overview-example',
  template: `
  <dialog #dialog style="height: 50px; opacity: 0.8">
    <button matTooltip="Test">test</button>
  </dialog>
  <button (click)="openDialog()">Open</button>`,
})
export class TooltipOverviewExample {
  @ViewChild('dialog') dialog: ElementRef<HTMLDialogElement>;
  openDialog() {
    this.dialog.nativeElement.showModal();
  }
}

结果

演示

https://stackblitz.com/edit/angular-3rx9ry?file=src%2Fapp%2Ftooltip-overview-example.ts

Answer 1

此行为是预期的，原因如下:

1. dialog 元素使用 ::backdrop 伪元素。

2. matTooltip 使用 Material CDK overlay，其 z-index 为 1000

当一个元素有 ::backdrop 时，它就成为 Top layer，将其置于 document 流程之外。这意味着除非添加新的 Top layer 元素，否则任何内容都将始终在其后面呈现。然后，旧的 Top layer 元素将位于新元素之后，但仍位于所有其他元素之上。

z-index 对 Top layer 元素没有影响。

阅读更多:

• Top-layer .
• ::backdrop .