Javascript 带顺风的模态不与形状重叠

我在React中使用了tailwind，试图创建一个表单，表单内部有一个模式，当单击按钮时，该模式应覆盖所有元素并显示在屏幕中央，但是，它显示在下面，如图所示。如何解决此错误？ 我也尝试过z索引和位置固定

我的模式代码：

    <div className="modal-wrapper invisible fixed bg-gray-500 w-screen h-screen flex items-center justify-center">
      <div className="p-8 bg-white text-center rounded ">
        <Dependentes />
      </div>
    </div>

如果需要更多代码，请访问我的GitHub上的以下链接：

这是按钮：

这就是单击时出现的问题：

---

我解决了这个问题，首先离开模态，在所有输入之前，在标记表单的正下方，如下所示：

  <div className="grid grid-flow-col grid-rows-1 sm:grid-rows-1 sm:grid-cols-2 gap-2">
    <form onSubmit={addCollaborator}>

      <div className="modal-wrapper invisible fixed bg-gray-700 bg-opacity-30 w-screen h-screen flex items-center justify-center">
        <div className="pt-4 pb-7 pr-10 pl-10 bg-white border-2 border-indigo-300 rounded ">
          <span id="close" className="close text-3xl text-indigo-500 font-bold cursor-pointer block text-right">&times;</span>
          <Dependentes />
        </div>
      </div>

&时代；