Html 混合混合模式与具有位置粘性的表格单元格

我在Google Chrome和Firefox中都有非常奇怪的行为

我有一张带有渐变背景的桌子，可以创建斑马条纹。细胞有一个白色的背景，我使用混合模式隐藏的细胞是粘性的，所以只有一个粘性细胞是可见的

问题是，当表格单元格有粘性时，混合模式无法正常工作，您会同时看到多个单元格。但如果我把div放在牢房里，让div粘上，它就会神奇地工作。知道为什么吗

表与表之间的区别如下：

.table-A.level-2[rowspan]div，
.表B.0级分区，
.表B td[世界其他地区]{
位置：粘性；
排名：0；
}

两个表都有：

.level-2[rowspan]{
背景：白色；
混合模式：倍增；
垂直对齐：顶部；
}

你可以从中看出问题所在

在此屏幕中：

我的问题是为什么会发生这种情况，为什么细胞的工作方式不同于div内部。正如您从演示中看到的，我已经知道如何解决这个问题，我只想知道为什么它会出现这种情况。

请参阅：

粘性定位元素是其计算的

位置

值为

粘性

的元素。它被视为相对定位，直到其包含的块在其流根（或其滚动所在的容器）内超过指定的阈值（例如将

top

设置为除auto以外的值），此时它被视为“卡住”，直到遇到其包含块的相对边缘

因此，您的问题不是由

td

或

div

本身引起的。这是因为他们：

如果position属性为

静态

、

相对

、或

粘性

，则包含的块由最近的祖先元素的内容框边缘形成，该元素是块容器（例如内联块、块或列表项元素）或建立格式化上下文（例如表容器、flex容器、网格容器或块容器本身）

对于

div

内部

td

的粘性，很明显，包含块是其父

td

（因为

td

建立了一个）因此每个

div

都有自己的包含块，不会被堆叠

---

对于sticky with

td

，我没有找到任何关于包含

td

块的官方文档，只找到了，所以我不确定是

tbody

、

table

还是包装该表的div。唯一可以确定的是所有的

td

共享同一个包含块，这就是它被堆叠的原因。

这是否意味着表单元格上的

位置：sticky

未指定？看起来Chrome和Firefox实现了完全相同的功能。只是不清楚，不是没有说明，因为文档给了我们信息来猜测包含块的内容。在这种情况下，应该是div包装表，因为它有

overflow-y:auto

，但是

td

只是“卡在”表中，所以我想我错过了一些东西。