打开时，“材料下拉列表”组件的Z索引未在固定div之下分层

Question

目标： 我希望将页眉，选项卡部分和单选按钮部分固定为某种形式（请参见下图）。意味着它们应该始终在视野中，并且永远不要有任何重叠的元素。

该表格如下所示：

当我简单地向下滚动表单时，这工作正常：

问题：

当我打开Angular Material下拉菜单时，它覆盖了Radio Button部分：

这是HTML。突出显示的部分是我要固定在表单上的元素：

这是3个部分的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更改为<1001的z-index，但是仍然与单选按钮部分重叠。

如何在所有3个部分下面显示打开的下拉菜单？

编辑：添加屏幕截图以显示出现问题的cdk叠加。我尝试过删除和降低z-index，但是没有任何效果

Answer 1

问题是mat-tab-body，z-index: 1这不会让您的内部固定视图具有更高的高度。z-index您可以从put 中删除mat-tab-body，然后您的内容将不再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>

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