时间戳

首页 > 解决方案 > Tailwind css 弹出窗口显示在图标下方

html - Tailwind css 弹出窗口显示在图标下方

问题描述

我正在构建一个data-table使用 tailwindcss 的功能，但我有一个小问题，即排序图标（asc、desc）出现在操作弹出窗口的顶部：

表动作

操作弹出窗口上显示的排序图标

批量操作的 HTML 代码：

<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">
        <div class="rounded-md bg-white shadow-xs" style="
    z-index: 100;
">
            <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>

状态html代码：

<button wire:click="sortBy('status')" class="flex items-center space-x-1 text-left text-xs leading-4 font-medium text-cool-gray-500 uppercase tracking-wider group focus:outline-none focus:underline">
            <span>Status</span>

            <span class="relative flex items-center">
                                                            <svg class="w-3 h-3 group-hover:opacity-0" 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="M5 15l7-7 7 7"></path>
                        </svg>
                        <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 absolute" 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 9l-7 7-7-7"></path>
                        </svg>
                                                </span>
        </button>

我尝试使用 z-index 但没有用。

请指教，

标签： htmlcsstailwind-css

解决方案

这确实似乎是一个z-index问题。当您使用浏览器开发控制台进行检查时，请查找z-index图标和菜单上的声明。

尝试将类z-0( Tailwind z-index ) 添加到此行：

<button wire:click="sortBy('status')" class="flex items-center space-x-1 text-left text-xs leading-4 font-medium text-cool-gray-500 uppercase tracking-wider group focus:outline-none focus:underline">

添加后z-0：

<button wire:click="sortBy('status')" class="z-0 flex items-center space-x-1 text-left text-xs leading-4 font-medium text-cool-gray-500 uppercase tracking-wider group focus:outline-none focus:underline">

您也可以尝试z-50像这样添加到菜单中（最后的方式）：

<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">

推荐阅读