Z-Index of Material Dropdown component not layering underneath a fixed div when opened
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;
}