Javascript 角度材质日期选择器日历显示在角度模式后面

我有以下简单的代码：

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

它填充得很好，但当你点击它时，我能看到的日历会在窗口后面的阴影中弹出

*我正在使用这个日期选择器：

---

我最终进入angular-material.css并将Z索引更改为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); }

---

就像ACSteel一样，您可以强制CSS将其带到您需要的地方，但是在模块的CSS文件中这样做并不是一种好技术

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

---

祝你好运

您只需将其放入模态的html模板中：

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

.md日期选择器日历窗格{
z指数：1200}

接受的答案已过时。对于

@angular/material 5.0.0-rc0

，已成功使用：

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

---

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

/deep/.cdk覆盖容器{z-index:1200！重要；}

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

---

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

在组件html文件中添加以下代码：

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

：：ng deep.cdk覆盖容器{
z指数：2000；

按“模式”你是说$mdDialog吗？我认为发布对话框的整个html模板会很有帮助。我使用$uiModal，其中我使用了templateUrl和控制器，基本上是另一个视图和js文件，创建了一个modal.simple和perfectNice解决方案，处理Angle material dialog和bootstrap modal.aka

.cdk overlay容器{z-index:1200！重要；}

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