Блог

когда я прокручиваю страницу вверх, заголовок таблицы перекрывается с тенью основного заголовка, как показано на скриншоте ниже :

Страница, когда она не прокручивается вверх

Страница при прокрутке вверх перекрывает тень заголовка

Пожалуйста, найдите ниже 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;
   }
  

При прокрутке страницы вверх таблица mat перекрывает мою основную строку заголовка (желтым цветом), которая также перекрывает тень основного заголовка, как видно на втором изображении внутри красной рамки.

Любая помощь будет оценена.

я использовал z-index: 99999 на панели инструментов вместо z-index: 1, и это сработало!!!!