材料下拉组件的Z-Index在打开时没有位于固定div层下方

Question

目标： 我希望表单中的标题、选项卡部分和单选按钮部分固定（见下图）。也就是说，它们应该始终可见，不会有任何重叠的元素。

表单如下所示：

这在我简单地向下滚动表单时运作良好：

问题：

当我打开Angular Material下拉菜单时，它会覆盖收音机按钮区域：

这是HTML代码。我希望在表单中固定突出显示的部分是以下元素：

这是三个部分的CSS代码

//Header:
.module__header {
  position: fixed;
  top: 0px;
  z-index: 1001;
  display: flex;
  height: 35px;
  width: 100%;
  background-color: #082749;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  align-items: center;
  justify-content: stretch;
  padding: 0;
  margin-bottom: 0;
}

// Tab Section:
  .mat-tab-label-container {
    position: fixed;
    top: 35px;
    padding-top: 10px;
    z-index: 1001;
    width: 100%;
    background: #fff;
  }

// Radio Button Section:
.timaticFullTextView {
  padding-top: 35px;
  padding-left: 15px;
  padding-bottom: 15px;
  background: #fff;
  z-index: 1001;
  position: fixed;
  width: 100%;
  border-bottom: 1.5px solid gray;
}

我已经尝试将cdk-overlay-container更改为z-index<1001，但仍然会遮挡单选按钮部分。如何使打开的下拉菜单显示在所有3个部分之下？备注：添加截图以显示引起问题的cdk-overlay。我已尝试删除和降低z-index，但没有任何效果。

- Kode_12

---

尝试在下拉菜单上使用z-index: -1或更低的值。 - Ismail Vittal

我尝试过了，但是cdk-overlay-container出现在整个表单的后面。 - Kode_12

将单选框容器的z-index值也增加。 - Ismail Vittal

那仍然不会起作用。 - Kode_12

你能否在stackblitz.com上创建一个示例，以重现该问题？ - David

Answer 1

你在对错误的元素应用样式时找到了正确的元素。

以下是我是如何解决这个问题的。

最初的回答：你在样式中选错了元素，正确的元素没有被应用样式。

这是我是如何解决这个问题的。

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

- Sergey

Answer 2

问题在于mat-tab-body具有z-index: 1，这将不允许您内部的固定视图具有更高的海拔高度。您可以从mat-tab-body中删除z-index，但是您没有z-index的内容将不再可点击，因此您必须为您的非固定内容添加z-index和position。

代码应该如下所示：

<mat-tab>
  <mat-tab-body> <!-- <-- added automatically -->
    <div class="tab-header"></div>
    <div class="tab-content"></div>
  </mat-tab-body>
</mat-tab>

::ng-deep mat-tab-body {
  z-index: unset !important;
}

.tab-header {
  position: fixed;
  z-index: 1001;
}

.tab-content {
  position: relative;
  z-index: 1;
}

- frido