Z-Index of Material Dropdown component not layering underneath a fixed div when opened

Objective: I would like the Header, Tab Section, and the Radio Button Section to be fixed in a form (see image below). Meaning that they should always be in view, and never have any overlapping elements.

The form looks like the following:

This is working fine when I simply scroll down on the form:

The Problem:

When I open the Angular Material dropdown, it overlaps over the Radio Button Section:

Here is the HTML. The highlighted sections are the elements that I want to be fixated on the form:

And here is the CSS for the 3 sections

//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;
}

I have tried changing the cdk-overlay-container to a z-index of <1001, but that still is overlapping the Radio Button Section.

How can I have the opened dropdown display underneath all 3 sections?

Edit: Adding screenshot to show the cdk-overlay that is giving issues. I have tried removing and lowering the z-index, but it doesn't have any effect

from Z-Index of Material Dropdown component not layering underneath a fixed div when opened