css - Z-Index 不适用于 Angular 的材质对话框

Question

漏洞：

Z-Index 不适用于材质对话框

预期的行为是什么？

Z-Index 应该在 Material Dialog 上工作，或者 Dialog 应该在其他一切之上。

当前的行为是什么？

下面的选择选项涵盖了材质对话框。

重现的步骤是什么？ https://stackblitz.com/edit/angular-gsa8kr-rkss7t?file=app/dialog-overview-example.html

1. 键入文本。
2. 选择下拉菜单。

截图：https ://postimg.cc/gallery/2i3tc2sbc/

还有其他什么我们需要知道的么？

尝试过的 CSS 修复：

.modal__content,dialog-layout,mat-dialog-container,.mat-dialog-container,#cdk-overlay-0,.cdk-overlay-pane {
    z-index: 9999 !important;
}

这些都不起作用。

标签： cssangularangular-material

Answer 1

持有 matdialog 覆盖的类是cdk-overlay-container

将此代码添加到您的 style.css

.cdk-overlay-container {
    z-index: 9999 !important;
}

那应该可以解决问题。