CSS - 粘性 - 即使在使用适当的 z-index 后滚动时，非粘性项目也会覆盖粘性项目

Question

我有一个带有粘性标题（垂直）和前四列粘性（水平）的表格。 我可以使用 tailwind （sticky、left-、top-0 和 z-）来实现这两种方法，但有一个问题除外： 垂直滚动，非粘性行在粘性标题上滚动，即使在使用 z-30 作为标题和 z-10 作为非粘性行之后也是如此。

水平滚动工作正常。唯一的问题是垂直滚动。

我在复制问题时遇到了困难，但设法想出了下面的一些东西，

<script>
    let columns = 10;
    let rows = 6;
</script>
<div class="overflow-x-auto overflow-y-auto max-h-[400px]">
  <table class="table-auto border-collapse bg-white w-full">
    <thead class="sticky top-0 bg-background">
      <tr class="flex">
        <th class="sticky left-0 z-30 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Header 1</th>
        <th class="sticky left-14 z-30 bg-gray-300  border border-gray-400 p-1 w-30">Sticky Header 2</th>
        <th class="sticky left-28 z-30 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Header 3</th>
        <th class="sticky left-40 z-30 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Header 4</th>
        {#each {length: columns} as _, i}
            <th class="border border-gray-400 p-1 z-20">Non Sticky Header {i+1}</th>
        {/each}
      </tr>
    </thead>
    <tbody>
        {#each {length: rows} as _, j}
          <tr class="flex">
            <td class="sticky left-0 z-20 bg-gray-300 w-30 border border-gray-400 p-1">Sticky Record 1</td>
            <td class="sticky left-14 z-20 bg-gray-300 w-30 border border-gray-400 p-1">sticky Record 2</td>
            <td class="sticky left-28 z-20 bg-gray-300 w-30 border border-gray-400 p-1">sticky Record 3</td>
            <td class="sticky left-40 z-20 bg-gray-300 w-30 border border-gray-400 p-1">sticky Record 4</td>
            {#each {length: columns} as _, i}
            <td class="border border-gray-400 p-1 z-10">Non Sticky Record {i+1}</td>
            {/each}
          </tr>
        {/each}
    </tbody>
  </table>
</div>

期望：非粘性行在粘性标题下滚动

Answer 1

这是一个小问题。所需要做的就是将 z 索引从 th 移动到 thead。一旦移动，非粘性行就开始在粘性标题下滑动。

<script>
    let columns = 10;
    let rows = 6;
</script>

<div class="overflow-x-auto overflow-y-auto max-h-[400px]">
  <table class="table-auto border-collapse bg-white w-full">
    <thead class="sticky top-0 z-30 bg-background">
      <tr class="flex">
        <th class="sticky left-0 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Header 1</th>
        <th class="sticky left-14 bg-gray-300  border border-gray-400 p-1 w-30">Sticky Header 2</th>
        <th class="sticky left-28 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Header 3</th>
        <th class="sticky left-40 bg-gray-300 border border-gray-400 p-1 w-30">Sticky Header 4</th>
        {#each {length: columns} as _, i}
            <th class="border border-gray-400 p-1 z-20">Non Sticky Header {i+1}</th>
        {/each}
      </tr>
    </thead>
    <tbody>
        {#each {length: rows} as _, j}
          <tr class="flex">
            <td class="sticky left-0 z-20 bg-gray-300 w-30 border border-gray-400 p-1">Sticky Record 1</td>
            <td class="sticky left-14 z-20 bg-gray-300 w-30 border border-gray-400 p-1">sticky Record 2</td>
            <td class="sticky left-28 z-20 bg-gray-300 w-30 border border-gray-400 p-1">sticky Record 3</td>
            <td class="sticky left-40 z-20 bg-gray-300 w-30 border border-gray-400 p-1">sticky Record 4</td>
            {#each {length: columns} as _, i}
            <td class="border border-gray-400 p-1 z-10">Non Sticky Record {i+1}</td>
            {/each}
          </tr>
        {/each}
    </tbody>
  </table>
</div>

<svelte:head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css"/>
</svelte:head>