使用transform: translateY实现固定表头时tbody遮挡thead问题咨询

这不是浏览器Bug，是CSS层叠上下文的标准规定行为，原因如下：

• 你给thead设置了非none的transform: translateY属性，符合CSS规范中层叠上下文的触发条件，会自动创建独立的层叠上下文。这类由transform触发的层叠上下文，默认和同级其他层叠上下文按DOM出现顺序排序，子元素的z-index仅能在父层叠上下文的范围内生效，无法突破父级的层级限制。
• 表格内的元素设置非none的filter: hue-rotate、设置了z-index的position: sticky，同样会触发新的层叠上下文创建。这些tbody内部生成的层叠上下文在DOM流中晚于thead出现，默认层级就会高于thead，你在元素内部调整z-index无法突破各自父级的层叠上下文限制，自然无法生效。

解决方法也很简单：
给thead本身显式设置isolation: isolate + 足够高的z-index（比如z-index: 10），主动提升thead所在层叠上下文的全局层级，就能保证它始终覆盖下方tbody的内容。如果不想直接修改thead的属性，也可以给thead外层加一个独立容器，把transform属性转移到这个外层容器上，同时给容器设置position: relative和更高的z-index，效果完全一致。

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