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

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

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

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

Эта проблема:

Когда я открываю раскрывающийся список Angular Material, он перекрывает раздел радиокнопки:

Вот 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, но это все еще перекрывает раздел Radio Button.

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

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