Tailwind CSS构建data-table时排序图标覆盖操作弹窗问题

问题根因 #

z-index 仅在同一个层叠上下文内生效，你之前将z-index: 100设置在了弹窗的内层div上，但弹窗的最外层容器（带x-show="open"的绝对定位div）没有设置z-index，且排序图标所在的<span class="relative flex items-center">因为设置了relative属性创建了层叠上下文，层级高于未设置z-index的弹窗外层容器，所以哪怕弹窗内层z-index再高也不会覆盖排序图标。

修复步骤 #

1. 给弹窗的最外层绝对定位容器添加Tailwind的z-index类，比如z-50（Tailwind默认z-50是弹窗通用层级，数值只要高于排序图标所在容器的z-index即可）
2. 删掉内层div上冗余的内联z-index样式，避免层级混乱

修改后批量操作模块代码 #

<div x-show="open" x-description="Dropdown panel, show/hide based on dropdown state." x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute mt-2 origin-top-right right-0 rounded-md shadow-lg w-56 z-50">
        <div class="rounded-md bg-white shadow-xs">
            <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
                <button type="button" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 flex items-center space-x-2" wire:click="exportSelected" role="menuitem">
        <svg class="inline-block w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
 <span>Export</span>
    </button>
                    <button type="button" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 flex items-center space-x-2" wire:click="showDeleteModal()" role="menuitem">
        <svg class="inline-block w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
 <span>Delete</span>
    </button>
            </div>
        </div>
    </div>

如果上述修改后仍未生效，可额外给排序按钮外层的th标签或父容器添加z-10类，确保它的层级低于弹窗的z-50即可。

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