在Angular 2+中嵌入模态的对话框前面显示mat-select答案

【问题标题】：Display mat-select in front of a dialog embedded within a modal in Angular 2+在Angular 2+中嵌入模态的对话框前面显示mat-select
【发布时间】：2019-11-03 19:26:04
【问题描述】：

看起来 mat-selects 消失在模态和对话后面都是在 SO 上多次解决的问题

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

在全局styles.scss中。

如果我在模态中有一个 mat-select，我已经在我的应用程序中成功实施了这个建议：

但是，当我尝试在对话框在模态框内进行垫选择时，垫选择菜单出现在模态框上方但对话框后面：

非常欢迎和非常感谢任何建议。如果人们认为有必要，我会尝试创建一个最小的可重现示例，但如果有一个我不知道的简单解决方案，我想在 stackblitz 上实现复杂的应用程序结构之前尝试一下......

【问题讨论】：

请在 stackblitz 中重现此问题
这里可能已经回答了这个问题：stackoverflow.com/a/53062626/11854340

标签： angular angular-material

【解决方案1】：

实际上是那个css规则导致这个问题，如果你想继续使用那个css，试着在css规则中添加.cdk-overlay-connected-position-bounding-box：

.cdk-global-overlay-wrapper, 
.cdk-overlay-container, 
.cdk-overlay-connected-position-bounding-box {
    z-index: 9999!important;
}

【讨论】：

做到了。你怎么知道的？
我们在我的工作中使用材料，并且在元素的索引方面遇到了类似的问题。我只是按照 html 结构一直到包含选择列表本身的元素，并确保 z-index 匹配它。

【解决方案2】：

请检查对话框的 z-index 并将其减小到 mat select 的级别以下，这样您的 mat-select 将显示在对话框的顶部

【讨论】：