Angular Material添加sticky列后行hover的box-shadow如何正常显示

问题成因 #

Angular Material 的sticky固定列单元格默认自带position: sticky属性，会生成独立堆叠上下文，默认层级高于普通流元素。之前为了给行加box-shadow给.mat-row设置了position: relative，但行元素未配置更高z-index，导致行的阴影被堆叠层级更高的sticky单元格覆盖，固定列区域看不到阴影。

修复步骤 #

1. 移除原有.mat-row:hover样式里的position: relative和行级box-shadow配置，避免打乱原生固定列的堆叠逻辑
2. 将阴影效果下沉到单元格层面配置，保证sticky单元格自身能渲染阴影
3. 调整hover状态下sticky单元格的z-index，避免阴影被相邻列遮挡

最终可用样式代码：

/* 行基础悬停样式 */
.mat-row:hover {
    background: #d00e0eec;
    height: 2.125rem;
}

/* 所有单元格统一加底部阴影，覆盖普通列和sticky列 */
.mat-row:hover .mat-cell {
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.10);
}

/* 修正sticky单元格hover时的堆叠层级 */
.mat-row:hover .mat-cell.mat-sticky-cell {
    z-index: 2;
}

如果是左侧固定列，固定列和普通列衔接处有视觉断层，可以给最右侧的固定单元格补充一个微弱的右侧内阴影做过渡：

/* 可选：左固定列最后一列补衔接阴影，按需替换为自己的列类名 */
.mat-row:hover .mat-column-projectName.mat-sticky-cell {
    box-shadow: 3px 0 5px rgba(0,0,0,0.06), 0px 3px 2px rgba(0, 0, 0, 0.10);
}

注意：不要随意修改.mat-row的position属性，Angular Material表格的sticky列、行交互都依赖默认的堆叠上下文规则，修改行定位属性很容易引发固定列错位、层级覆盖异常等问题。

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