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

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

enter image description here

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

enter image description here

Проблема:

Когда я открываю раскрывающийся список «Угловой материал», он накладывается на раздел переключателей :

enter image description here

Вот HTML. Выделенные разделы - это элементы, которые я хочу зафиксировать в форме:

enter image description here

А вот и 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-индекс, но это не имеет никакого эффекта введите описание изображения здесь

9
Kode_12 31 Май 2019 в 03:43

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;
}
1
fridoo 4 Июн 2019 в 11:27

Вы нашли правильный элемент, применяя стили к неправильному.

Вот как я заставил это работать

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

0
Sergey 4 Июн 2019 в 19:08