我的下拉菜单显示在弹出窗口上方而不是背景中

Question

当我在表单的 next 页面上单击左上角的十字时，会出现一个弹出窗口。但是为什么我的下拉列表显示在弹出窗口上方（请看图片）

export default function Details() { 
  ...
  return (
    <>
      <form onSubmit={handleSubmit}>
        <Comments />
        <input
          type="text"
          value={menu}
          placeholder="Menu"
          onChange={(e) => setMenu(e.target.value)}
        />
        <div className="text-md font-bold  text-gray-500 flex flex-wrap gap-x-2 ">
          Type : <Dropdown options={LOCATION} isMulti={false} />
        </div>
        //other inputs   
    </>
  );
}

export default function Comments() {
  const TYPE = [
    { label: "veggie", value: "veggie" },
    ...
  ];
  return (
    <>
      <div className="grid grid-cols-2 ">
        <div className="text-md font-bold rounded-md mx-2 leading-6 text-gray-500  gap-x-2 gap-y-4">
          Type: <Dropdown options={TYPE} isMulti={true} />
        </div>    
    </>
  );
}

这是我的code

这里是图片：

Answer 1

保持弹窗的z-index到10（向前推）。您可以通过将 z-10 添加到弹出窗口的 div 来实现。

如果它不起作用，那么您也可以将下拉列表的 z-index 保留为 -10（向后推）。为此，您必须将 -z-10 添加到下拉列表中。

以上两种解决方案中的任何一种都可以。

我的下拉菜单显示在弹出窗口上方而不是背景中

My dropdowns are displayed above my popup instead on the background

reactjs

tailwind-css