Блог

У меня есть 2 компонента в Angular с material design, header и body, где заголовок представляет собой панель инструментов, использующую класс ‘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>
  

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

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

Когда элементы накладываются друг на друга, z-индекс определяет порядок расположения различных слоев, которые будут образовывать элементы. Как правило, один элемент будет перекрывать другой элемент, если его значение 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 ЗДЕСЬ

ДЕМОНСТРАЦИЯ: