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

这些都没有用。

Answer 1

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

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

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

这应该可以解决问题。

Answer 2

<select> 元素是 HTML 中的交互式内容元素。它的行为类似于右键单击上下文菜单，并呈现在所有文档元素之上。

在您的情况下，当您在字段中输入您的姓名后单击选择时，会依次发生以下事情：

1. 调用文本框上的模糊事件并打开对话框。
2. 选择菜单打开。

因此，按照顺序，发生的事情是正确的，即先打开对话框然后选择，因此选择在对话框上方，这是正确的。

当然，发生这种情况时界面看起来并不好，因此有一个解决方法，即在对话框打开时隐藏选择，然后在假设 0.1 秒后再次显示。作为选择的隐藏，其菜单将与之隐藏。

我已经为你实现了。请看一下这个 Stackblitz：Select closing on dialog open

希望对你有帮助。