角材料高程在两个零件之间不显示

Question

我在Angular中有2个组件，分别是材质设计，标题和主体，其中标题是使用'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 HERE

演示：