headlessui 列表框下拉菜单干扰第二个列表框

Question

我在使用 headlessui Listbox 创建下拉菜单时遇到问题。

有两个列表框，一个位于页面顶部，一个位于页面底部。问题在于，当打开顶部列表框菜单时，它会干扰底部列表框，导致难以进行选择。选择菜单应该完全位于前层。我该如何解决这个问题？

选择之前：

打开顶部列表框：

底部列表框妨碍了：

代码沙箱可用这里，因此您可以尝试测试情况。

Answer 1

经过一番研究，我找到了解决此问题的方法。

我们可以为第一个列表框元素设置以下样式选项。 （或者创建一个包含第一个列表框的

div

元素并设置样式。）

style={{ position: "relative", zIndex: 1 }}

您可能不需要位置选项或需要将其设置为“绝对”。

请注意，顺风“z-1”选项不起作用。

以下问题帮助了我：https://github.com/tailwindlabs/headlessui/discussions/1583

Answer 2

同级列表框的父级需要 z 索引来正确排序它们。

也就是说，向上遍历 DOM，直到列表框的父级成为同级，然后添加

z-index:

和

position: relative

。例如：

<div>
   <div className="z-50 relative"> {/* Parent of Listbox that is sibling */} 
       <Listbox>...</Listbox>
   </div>
   <div className="z-40 relative"> {/* Parent of Listbox that is sibling */}
       <Listbox>...</Listbox>
   </div>
   <div className="z-30 relative"> {/* Parent of Listbox that is sibling */}
       <Listbox>...</Listbox>
   </div>
</div>

这样，您可以保持 Listbox.Options 绝对定位，并且上方的下拉菜单将位于下方的下拉菜单上方。

查看 Codepen 的固定版本：https://codesandbox.io/s/headlessui-react-listbox-example-forked-yh5jpt?file=/src/Listbox2.js