代码之家 › 专栏 › 技术社区 › Andre Elrico

mat菜单穿透“cdk叠加雾”

angular-cdk angular-material angular

2

Andre Elrico · 技术社区 · 7 年前

这 STACKBLITZ (某人)说明了问题所在。

.WHYYYYY 显示了我面临的“两个”问题。

看来我有两种方法来解决这个问题。

1 回复 | 直到 7 年前

1

9

yurzui 7 年前

当材质cdk打开菜单时,它将创建 cdk-overlay-container 具有填充所有浏览器窗口的背景区域。

body
  your app elements

  div.cdk-overlay-container   - z-index = 1000
    div.cdk-overlay-backdrop

一旦你触发 mouseenter mouseleave 事件立即发生。

这就是为什么在按钮上设置z-index超过1000使其工作的原因。

但是你可以猜到,你可以把它扔掉 backdrop :

子菜单.component.html

<mat-menu ... [hasBackdrop]="false">