< Сильный > Цель: Я хотел бы, чтобы заголовок, раздел вкладок и раздел переключателей были зафиксированы в форме (см. Изображение ниже). Это означает, что они должны быть всегда на виду и никогда не иметь перекрывающихся элементов.
Форма выглядит следующим образом:
Это работает нормально, когда я просто прокручиваю вниз форму:
Проблема:
Когда я открываю раскрывающийся список «Угловой материал», он накладывается на раздел переключателей :
Вот 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, но он все еще перекрывает секцию переключателей.
Как открыть раскрывающийся список под всеми тремя разделами?
Изменить: добавление скриншота, чтобы показать наложение cdk, которое вызывает проблемы. Я попытался удалить и опустить z-индекс, но это не имеет никакого эффекта 
2 ответа
Проблема в том, что 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;
}
Вы нашли правильный элемент, применяя стили к неправильному.
Вот как я заставил это работать
.cdk-global-overlay-wrapper, .cdk-overlay-container {
z-index: 99999 !important;
}