Mat-datepicker-toggle 显示在模态后面答案

【问题标题】：Mat-datepicker-toggle showing behind modalMat-datepicker-toggle 显示在模态后面
【发布时间】：2018-11-28 20:56:54
【问题描述】：

你好，使用 angular 4 和 bootstrap 4 时，我的视图出现问题。当我单击打开以显示日历时。它显示在我的模态后面。我想更改其类的 z-index，但我无法访问该类，因为它是自动生成的。我该如何解决问题？这是我的代码。提前致谢。

【问题讨论】：

标签： angular calendar bootstrap-4 bootstrap-modal bootstrap-datepicker

【解决方案1】：

问题是引导模式设置z-index:1050

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

在创建ckd-overlay-pane 时，材料日期选择器设置z-index: 1000

.cdk-overlay-pane {
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: 1000;
    display: flex;
    max-width: 100%;
    max-height: 100%;
}

将它添加到您的组件样式表应该可以解决问题...但这将适用于您整个项目中的所有日期选择器。

您需要包含一个自定义类标识符以使其具体化如果您只想更改模态日期选择器。
```
::ng-deep .cdk-overlay-container mat-datepicker-content{
  z-index:2000;
}
```

请参考这个 SO 问题的答案，了解为什么可以使用 ::ng-deep，直至另行通知。

What to use in place of ::ng-deep

【讨论】：

感谢您的回答，但还是同样的问题！ ://
嗨@Marshal，它最终通过使用 ::ng-deep .cdk-overlay-container{ z-index:2000; }。谢谢你
当我添加了这个。我的 z-index 为 1050 的悬停标签开始快速闪烁。
这也适用于我::ng-deep .cdk-overlay-container { z-index:2000; }