向上滚动时的角度材质表标题与主标题的框阴影重叠

Question

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

未向上滚动时的页面

页面向上滚动时会与标题上的阴影重叠

请找到以下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

我在垫子工具栏上使用了z-index:999999，而不是z-index:1，效果很好！！！！