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

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

• javascript
• html
• css
• angular
• angular-material

• try giving z-index: -1 or lower on the dropdown. – Ismail Vittal Commented May 31, 2019 at 0:54
• I tried that, but the cdk-overlay-container then appears behind the whole form – Kode_12 Commented May 31, 2019 at 1:05
• increase the z-index of radio container as well. – Ismail Vittal Commented May 31, 2019 at 1:11
• that will still not work. – Kode_12 Commented May 31, 2019 at 2:31
• 5 Can you create an example on stackblitz. reproducing the problem? – David Commented Jun 4, 2019 at 6:58

2 Answers 2

The problem is that mat-tab-body has z-index: 1 and this won't allow your fixed view inside to have a higher elevation. You can remove the z-index from mat-tab-body put then your content without a z-index won't be clickable anymore so you have to add a z-index and position to your not fixed content.

The code would have to look something like this:

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

You've found the right element whilst applying styles to the wrong one.

Here is how I made it work

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