Tailwind导航栏下拉菜单与其他元素重叠问题求解

问题根因 #

你使用的是Tailwind CSS框架，下拉菜单通过absolute定位悬浮展示，当前它的z-index层级低于页面其他元素，因此出现重叠。你之前添加z-0无效，是因为z-0对应的z-index值为0，和普通页面元素的默认层级一致，无法拉开层级差。

解决方案 #

直接给带x-show="open"属性的下拉容器（也就是设置了absolute的那个div）添加z-50类即可，Tailwind预设的z-50是专门给弹窗、下拉菜单这类需要全局悬浮的元素使用的高层级值，能保证菜单展示在所有内容上层。

修改后的代码片段参考：

<div x-show="open" 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 right-0 w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 dark-mode:bg-gray-800 z-50">

如果添加后仍有重叠，可以给整个导航栏的最外层容器也加上z-30及以上的z-index类，保证整个导航区域的层级高于页面正文内容。

补充说明 #

不要随意移除下拉菜单的absolute定位：absolute定位会让元素脱离正常文档流，不会占用布局空间，你之前移除后出现多余空白就是因为元素回到文档流挤占了位置。z-index生效的前提是元素设置了非static定位，你的下拉菜单已经是absolute定位，满足生效条件。

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