Angular Material DatePicker 日历显示在 Angular Modal 后面答案

【问题标题】：Angular Material DatePicker Calendar Shows Behind Angular ModalAngular Material DatePicker 日历显示在 Angular Modal 后面
【发布时间】：2016-04-14 15:23:53
【问题描述】：

我有以下简单的代码：

                <md-content>
                <md-datepicker ng-model="startDate" md-placeholder="Enter date">
                </md-datepicker>
                </md-content>

它填充得很好，但是当你点击它时，我可以看到的日历会在角度模态窗口后面的阴影中弹出。

*我正在使用这个日期选择器： https://material.angularjs.org/latest/demo/datepicker

【问题讨论】：

“模态”是指 $mdDialog 吗？我认为发布对话框的整个 html 模板会有所帮助。
我正在使用 $uiModal，我使用 templateUrl 和控制器，基本上是另一个创建模式的视图和 js 文件。

标签： javascript angularjs datepicker angular-material

【解决方案1】：

你只需要把这个放到modal的html模板中：

<style> 
.md-datepicker-calendar-pane{
z-index: 1200}
</style>

【讨论】：

简单完美
不错的解决方案，适用于 Angular 材质对话框和引导模式。

【解决方案2】：

接受的答案已过时。对于@angular/material 5.0.0-rc0已经使用成功：

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

https://stackoverflow.com/a/47274694/1225421

【讨论】：

又名.cdk-overlay-container{ z-index: 1200 !important; }

【解决方案3】：

我最终进入 angular-material.css 并将 Z-index 更改为 1151。

 .md-datepicker-calendar-pane {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1151;
  border-width: 1px;
  border-style: solid;
  background: transparent;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .md-datepicker-calendar-pane.md-pane-open {
    -webkit-transform: scale(1);
            transform: scale(1); }

【讨论】：

【解决方案4】：

::ng-deep .cdk-overlay-container {
  z-index: 1200 !important;
}

对于 Bootstrap 4 和 Angular 9 材料工作正常。

【讨论】：

【解决方案5】：

就像 ACSteel 一样，您可以强制 CSS 将其带到您需要的位置，但是在模块的 css 文件中执行此操作并不是一个好方法。

对 AngularMD 的任何更新都会覆盖您的更改，您最好在自己的 CSS 中强制使用 CSS 并将“！important”添加到规则中。

祝你好运！

【讨论】：

【解决方案6】：

你需要指定 /deep/ 因为这是运行时生成的类：

/deep/ .cdk-overlay-container{ z-index: 1200 !important; }

【讨论】：

您提供了一些 CSS 类，但没有说明将其放置在何处（在哪个文件中）。

【解决方案7】：

在组件html文件中添加这段代码：

<style>
  ::ng-deep .cdk-overlay-container {
    z-index: 2000;
</style>

【讨论】：