Z-Index在Angular的Material对话框上不起作用

Question

错误：

Z索引不适用于“材质”对话框

预期的行为是什么？

Z-Index应该在Material Dialog上起作用，或者Dialog应该在所有其他事物之上。

当前行为是什么？

材料对话框包含在下面的select选项中。

复制的步骤是什么？ 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

保存子对话框覆盖的类为 cdk-overlay-container

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

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

那应该可以解决问题。

Answer 2

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

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

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

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

但是，当发生这种情况时，界面当然看起来并不好，所以有一种解决方法，即在对话框打开时隐藏选择，然后在让用户说0.1秒后再次显示它。隐藏所选内容时，其菜单将随之隐藏。

我已经为您实现了它。请查看以下Stackblitz：Select closing on dialog open

希望有帮助。