CSS 粘性 z-index 仅适用于 TD，不适用于文本内容

Question

我已经尝试了所有可能的搜索和这个，但一无所获。我有一个 table，其中 thead tr 设置为 position: sticky，但它无法按预期工作 - td 的文本内容覆盖粘性 th，背景覆盖了元素，但文本覆盖了，就像三明治一样 ;'d.

Demo

Git

我试过使用否定 z-index、translateZ(0)，但似乎没有任何效果..

Answer 1

我只是删除了置顶贴，然后发现它覆盖了侧边栏。因此，保持粘性并将 thead 的 z-index 更改为 200 并将 aside 标签更改为 300 对我有用。如果我遗漏了什么，请告诉我。

thead {
position: sticky;
z-index: 200;
}

aside {
grid-area: aside;
display: flex;
flex-direction: column;
gap: 2rem;
height: 100%;
color: var(--theme-light);
background: linear-gradient(30deg, var(--theme-dark), var(--theme-dark_darker));
position: relative;
z-index: 300;
width: 100%;
height: 100%;
transition: width .2s ease-out;
}