In my Angular app, I’m using mat-table with some long column names. To improve readability, I applied a rotate(-30deg) transformation to the header labels. However, this causes the labels to be overlapped by the next column’s div, instead of appearing on top.

I tried setting the parent z-index to 1 and the span's z-index to 99, but with no success.

How can I ensure that the rotated headers are properly displayed above adjacent columns?

<table
  mat-table
  [dataSource]="dataSource"
  multiTemplateDataRows
  class="mat-elevation-z0"
>
  <ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column">
    <th mat-header-cell *matHeaderCellDef class="header-class">
      <span class="rotated-span">
        {{ column }}
      </span>
    </th>
    <td mat-cell *matCellDef="let element">
      {{ element[column] }}
    </td>
  </ng-container>

  <!-- Header and Row -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

.rotated-span {
      position: absolute;
      height: 10px;
      transform: rotate(-30deg);
      transform-origin: center left;
      white-space: nowrap;
      z-index: 99 !important;
    }
    
.header-class {
    height: 100px;
    background-color: white;
    z-index: 1 !important;
}