Угловой материал Elevate Не отображается между 2 компонентами

Question

У меня есть 2 компонента в Angular с дизайном материала, заголовком и телом, где заголовок является панелью инструментов, использующей класс 'mat-elevation-z4':

<mat-toolbar color="primary" class="mat-elevation-z4">
  <mat-form-field appearance="fill"  class='search-bar'>
    <mat-label>Search something...</mat-label>
    <input matInput>
  </mat-form-field>

  <button mat-raised-button color="white" class='but-margin'> 
    <mat-icon>face </mat-icon>
     Account 
  </button>
</mat-toolbar>

и тело образца:

<mat-grid-list cols="2" rowHeight="2:1">
  <mat-grid-tile>1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
</mat-grid-list>

Однако после того, как я вставил компоненты в корневой компонент:

<app-header></app-header>
<app-body></app-body>

они появляются близко друг к другу, но заголовок не находится сверху тела, и тень не появляется.Есть ли способ решить эту проблему без добавления пробела между ними?

Answer 1

У меня была такая же проблема, просто добавьте style="z-index:2" к <mat-toolbar>

Когда элементы перекрываются, z-index определяет порядок различные слои, которые будут образовывать элементы. Как правило, один элемент будет охватывать другой элемент, если его значение z-index больше этого значения второго элемента.

Пример "z-index":

.boite-tirets { 
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.boite-doree { 
  position: absolute;
  z-index: 3; /* .boite-doree sera au-dessus de .boite-verte et .boite-tirets */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.boite-verte { 
  position: absolute;
  z-index: 2; /* .boite-verte sera au-dessus de .boite-tirets */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

<div class="boite-tirets">White box
  <span class="boite-doree">Gold box</span>
  <span class="boite-verte">Green box</span>
</div>

Код:

<mat-toolbar color="primary" class="mat-elevation-z4" style="z-index:2">
  <mat-form-field appearance="fill"  class='search-bar'>
    <mat-label>Search something...</mat-label>
    <input matInput>
  </mat-form-field>

  <button mat-raised-button color="white" class='but-margin'> 
    <mat-icon>face </mat-icon>
     Account 
  </button>
</mat-toolbar>

Вот пример StackBlitz: StackBlitz ЗДЕСЬ

DEMO: