我正在尝试使用React.js、Next.js、TailwindCSS和HeadlessUI开发一个网页。它接受几个输入（为此我使用了HeadlessUI的Listbox），它们必须连续放置，以便用户指定平台所需的信息。
在测试了开发的用户界面后，我发现列表框选项中有重叠。如下面的屏幕截图所示，它们需要正确渲染，彼此显示，这不是故意的。我需要解决这个问题

在TailwindCSS的文档中，应该在他们定义的classNames中有这个错误的具体解决方案，但我还没有找到。解决方案可以与将对象带到前面相关
有两个可能的目的地，我需要作出修改

1. ListboxOption的ClassName（母组件）：

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

1.列表框选项的类名（子组件）：

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