Mat-datepicker-toggle 在模态框后面显示

Question

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

- Fatim

Answer 1

问题在于 bootstrap-modal 设置了 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%;
}

将以下代码添加到组件样式表中即可解决问题...但这将应用于您项目中的所有日期选择器。

• You will need to include a custom class identifier to make this specific to your modal date-picker if you only want to change that one.

  ::ng-deep .cdk-overlay-container mat-datepicker-content{
    z-index:2000;
  }
  

请参考这个SO问题的答案，了解为什么在进一步通知之前使用::ng-deep是可以的。 如何替换::ng-deep

- Marshal

---

谢谢你的回答，但问题依旧！:/ - Fatim

嗨 @Marshal，最终通过使用 ::ng-deep .cdk-overlay-container{ z-index:2000; } 解决了。谢谢你。 - Fatim

当我添加了这个代码后，我的悬停标签的z-index为1050开始快速闪烁。 - JayC

这段代码对我也适用：::ng-deep .cdk-overlay-container { z-index:2000; }它的作用是将一个叫做.cdk-overlay-container的HTML元素的层级（z-index）设置为2000。 - Alex Guerreiro

Answer 2

将以下代码添加到您的组件样式表中：

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

- Vinay Wagarkar

---

这个回答是否对Marshal在2018年接受的回答或Alex Guerreiro在2020年的评论有所补充？ - greybeard