向上滚动时的 Angular Material Table 标题与主标题的框阴影重叠

Question

当我向上滚动页面时，表格标题会重叠到主标题的阴影上，如下面的屏幕截图所示：

Page when it isn't scrolled up

Page when it's scrolled up it overlaps the shadow on the header

请在下面找到 Angular Mat 表的 HTML 代码：

   <ng-container>
<h1 id="opportunity-header" style="margin-left: 7.5%; margin-top: 22px;">
  Opportunities - {{ accountName }}
</h1>
 <div class="opportunity-container">
   <table mat-table [dataSource]="opportunityList">
   <ng-container matColumnDef="position">
     <th *matHeaderCellDef mat-header-cell mat-sort-header>
      No.
      </th>
      <td *matCellDef="let element; let i = index" mat-cell>
        {{ i + 1 }}
     </td>
  </ng-container>
  <ng-container matColumnDef="name">
    <th *matHeaderCellDef mat-header-cell class="nameColumn">
      Name
    </th>
     <td *matCellDef="let element" mat-cell class="name">
         {{ element.getName() }}
     </td>
   </ng-container>

  <ng-container matColumnDef="isAssociated">
    <th *matHeaderCellDef mat-header-cell class="isAssociatedColumn">
      isAssociated ({{ opportunityAssociated() }})
    </th>
    <td *matCellDef="let element" mat-cell class="isAssociated">
      {{ element.getIsAssociated() ? "Yes" : "No" }}
    </td>
  </ng-container>

  <ng-container matColumnDef="stage">
    <th *matHeaderCellDef mat-header-cell class="stageColumn">
      Stage
    </th>
    <td *matCellDef="let element" mat-cell class="stage">
      {{ element.getStage() }}
    </td>
  </ng-container>

  <ng-container matColumnDef="amount">
    <th *matHeaderCellDef mat-header-cell class="amountColumn">
      Amount
    </th>
    <td *matCellDef="let element" mat-cell class="amount">$ {{ element.getAmount() }}</td>
  </ng-container>

  <tr *matHeaderRowDef="displayedColumns; sticky: true" mat-header-row></tr>
  <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
  </table>
    <div *ngIf="opportunities?.length == 0" class="empty-record">
      No Opportunities
     <mat-divider class="empty-divider"></mat-divider>
    </div>
   </div>
  </ng-container>

CSS 代码：

        .opportunity-container {
           height: 251px;
           margin-left: 7.5%;
           margin-bottom: 35px;
           overflow: auto;
           }

       .table {
          width: 100%;
          }

      .empty-record{
       padding-top: 62px;
       padding-bottom: 27px;
       text-align: center;
       }

      .empty-divider{
       margin-top: 55px;
      }

      .empty{
       margin-left: 64px;
      }

      .table{
      padding-top: 25px;
      }

       th.mat-header-cell, td.mat-cell, td.mat-footer-cell{
       text-align: center;
       width: 229px;
       }

       ::-webkit-scrollbar {
       width: 5px;
       }

     ::-webkit-scrollbar-track {
        background-color: transparent;
        border-radius: 10px;
        }

     ::-webkit-scrollbar-thumb {
        background: var(--gray-600);
        border-radius: 10px;
       }

    ::-webkit-scrollbar-thumb:hover {
    background: var(--gray-700);
     }

     :host {
    margin: 1.3em 0 0;
   }

向上滚动页面时，垫子表与我的主标题栏重叠（黄色），它也与主标题的阴影重叠，如红色框内的第二张图片所示。

任何帮助将不胜感激。

Answer 1

我在 mat-toolbar 上使用 z-index:99999 而不是 z-index: 1 并且它起作用了！！！！