SvelteKit+Tailwind侧边弹出导航无法遮盖表格表头求助

问题描述 #

用SvelteKit+Tailwind实现的侧边弹出导航，打开后能遮盖表格数据，但表格表头始终显示在导航上方，无法被遮挡。

问题根源 #

你的侧边导航用了absolute定位，但没设置z-index，导致它的层级压不过表格的<th>元素，所以表头能露出来，表格数据却被盖住了。

快速修复 #

给侧边导航加个高优先级的z-index就行，直接用Tailwind的z-50类：

修改后的导航代码：

<aside class="absolute w-full bg-gray-300 border-r-2 shadow-lg z-50" class:open>
  <button class="py-4 px-4" on:click={() => (open = false)}>
    <X />
  </button>
  <nav class="p-12 text-xl">
    <a class="block" href="/" on:click={() => (open = false)}>Today</a>
    <a class="block" href="/drivers" on:click={() => (open = false)}>Drivers</a>
    <a class="block" href="/lorries" on:click={() => (open = false)}>Lorries</a>
    <a class="block" href="/vets" on:click={() => (open = false)}>Vets</a>
    <a class="block" href="/user-profile" on:click={() => (open = false)}>Profile</a>
    <hr class="border-1 border-gray-500 cursor-pointer hover:border-red-500 duration-500" />
    <a href="/login" on:click={() => (open = false)}>Sign Out</a>
  </nav>
</aside>
<style>
  aside {
    padding-left: 20%;
    right: 100%;
    transition: ease-out 200ms;
  }
  .open {
    transition: ease-out 200ms;
    right: 20%;
  }
</style>

为什么这样有效 #

absolute定位元素的层级默认由DOM顺序决定，但表格表头（<th>）在浏览器渲染时有特殊的优先级。给导航加上z-50后，它的层级会超过所有普通静态定位的元素，自然就能覆盖表头了。

如果修复后仍有问题，可以检查下你的<th>有没有额外设置position或z-index属性，不过从你提供的表格CSS来看，应该不存在这个问题。

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