React+Next.js+TailwindCSS+HeadlessUI开发中Listbox选项重叠问题求助

修复方案 #

下拉选项重叠核心是绝对定位的下拉容器层级不足，或内部选项排版异常，调整以下两处className即可解决：

1. 修改Listbox选项容器（父组件）的className #

在原有类基础上添加z-50（可根据页面布局调整层级数值，比如z-40/z-60），确保下拉框处于更高层级，避免被其他元素遮挡：

className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-50"

2. 调整ListboxOption子组件的className #

子组件当前逻辑可保留，若选项间仍有垂直重叠，添加block类确保每个选项独占一行：

className={({ active }) => `relative cursor-default select-none block py-2 pl-10 pr-4 ${active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'}`}

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