如何避免Angular mat-table旋转表头被相邻列遮挡？

在Angular应用的mat-table中，部分列名过长，为提升可读性给表头标签添加rotate(-30deg)旋转变换后，旋转后的表头被相邻列遮挡，设置父元素与span的z-index未解决问题。

现有代码 #

HTML代码

<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>

CSS代码

.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;
}

解决方案 #

问题核心在于z-index生效依赖定位属性，且表头单元格默认的堆叠上下文会导致子元素层级失效，调整CSS如下：

.header-class {
  height: 100px;
  background-color: white;
  position: relative; /* 创建独立堆叠上下文，作为子元素z-index的参考 */
  z-index: 1;
  overflow: visible; /* 允许旋转内容超出单元格范围，避免被裁剪 */
}

.rotated-span {
  position: absolute;
  bottom: 10px; /* 调整位置，优化表头文字的垂直对齐 */
  left: 5px;
  transform: rotate(-30deg);
  transform-origin: bottom left; /* 修改旋转原点，让文字旋转后更贴合单元格布局 */
  white-space: nowrap;
  z-index: 99; /* 基于父元素的堆叠上下文，层级高于相邻单元格内容 */
}

说明 #

1. 给.header-class添加position: relative：创建独立的堆叠上下文，确保子元素的z-index能相对于当前单元格生效，不会被相邻单元格的堆叠上下文覆盖
2. 修改transform-origin为bottom left：让表头文字以单元格左下角为原点旋转，布局更合理，避免偏移混乱
3. 设置overflow: visible：确保旋转后超出单元格的文字不会被隐藏

内容的提问来源于stack exchange，提问作者LDevelop