Компонент Z-Index of Material Dropdown не открывается под фиксированным делителем при открытии

Question

Цель: Я бы хотел, чтобы заголовок, раздел вкладок и раздел переключателей были зафиксированы в форме (см. Изображение ниже).Это означает, что они должны быть всегда на виду и никогда не иметь перекрывающихся элементов.

Форма выглядит следующим образом:

Это работает нормально, когда я просто прокручиваю вниз форму:

Проблема:

Когда я открываю раскрывающийся список Угловой материал, он перекрывает переключательРаздел :

Вот HTML.Выделенные разделы - это элементы, которые я хочу зафиксировать в форме:

А вот CSS для 3 разделов

//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, но он все еще перекрывает секцию переключателей.</p>

Как открыть раскрывающийся список под всеми 3 разделами?

Редактировать: добавление снимка экрана, показывающего наложение cdk, вызывающее проблемы.Я попытался удалить и опустить z-индекс, но он не имеет никакого эффекта

Answer 1

Проблема в том, что mat-tab-body имеет z-index: 1, и это не позволит вашему фиксированному виду внутри иметь более высокую высоту. Вы можете удалить z-index из 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>

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

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

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

Answer 2

Вы нашли правильный элемент, применяя стили к неправильному.

Вот как я заставил его работать

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