为何sticky定位表格单元格的mix-blend-mode表现与内部sticky div不同

差异产生的根本原因 #

这一现象的核心是CSS表格元素的特殊渲染规则和堆叠上下文、mix-blend-mode的作用范围约束共同导致的，具体可分为两种场景拆解：

场景1：直接给设置sticky定位 #

你用到的差异代码如下：

.table-A .level-2 [rowspan] div,
.table-B .level-0 div,
.table-B td[rowspan] {
    position: sticky;
    top: 0;
}

通用样式中你给设置了如下属性：

.level-2 [rowspan] {
    background: white;
    mix-blend-mode: multiply;
    vertical-align: top;
}

当sticky直接作用在表格单元格上时：

• 表格单元格属于CSS表格布局的内置特殊元素，天生受表格布局算法约束。浏览器为了保证粘性定位不破坏表格自身的布局流，会自动为每个设置了sticky定位的创建独立的堆叠上下文
• mix-blend-mode的混合范围仅局限于当前元素所属的堆叠上下文内部，只会和当前堆叠上下文下层的内容（即表格的斑马纹背景）混合，不会和其他独立堆叠上下文的重叠sticky混合
• 多个重叠的sticky分属不同堆叠上下文，层级更高的的白色背景不会遮挡下层的内容，最终就会出现多个sticky单元格同时重叠显示的问题。

场景2：给内部嵌套的div设置sticky定位 #

当sticky定位作用在单元格内部的div上时：

• 本身没有设置会触发独立堆叠上下文的属性，所有sticky的div都从属同一个父级堆叠上下文（表格容器的堆叠上下文）
• 上设置的`mix-blend-mode: multiply`会和当前堆叠上下文内所有层级低于它的内容混合，包括其他重叠的sticky元素的内容和背景。白色背景做正片叠底计算时，会完全覆盖下层的sticky单元格内容，最终仅显示层级最高的当前sticky单元格，符合预期效果。

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