Firefox自动填充将输入放在加载div的顶部

Question

我正在尝试使用React创建一个非常基本的表单，该表单具有一些输入和一个提交按钮。当按下提交按钮时，一个加载屏幕基本上就是一个不透明度为0.9的div，应该会覆盖该屏幕。如果使用自动填充（或自动完成，以浏览器为您填写整个表单的形式为自动填充）填充表单，则表单上的输入不会被加载屏幕覆盖，我可以像在打开时一样对其进行编辑div的顶部。这是问题的示例

如果我自动填写表单，然后手动编辑其中一个输入，则该输入将被div覆盖，而其余输入仍位于其顶部。我不确定是什么问题，甚至不确定是否可以解决，但可以提供任何帮助。 Here is the codepen如果您想尝试一下。

const App = ()=>{
  const [loading, changeLoading] = React.useState(false)
  const submit = (e) =>{
    e.preventDefault();
    e.stopPropagation;
    changeLoading(true);
  }
  return(
    <div>
      {loading &&
      <div className = 'loading'>
        <h1>Loading...</h1>
      </div>}

      <form autocomplete = 'on' onSubmit = {submit}>
        <label forHtml = 'name'>Name</label>
        <input 
          name = 'name'
          id = 'name'
          autocomplete = 'name'
         />

        <label forHtml = 'email'>Email</label>
        <input 
          name = 'email'
          id = 'email'
          autocomplete = 'email'
         />

        <label forHtml = 'tel'>Phone</label>
        <input 
          name = 'tel'
          id = 'tel'
          autocomplete = 'tel'
         />
        <input 
          type = 'submit'
          onClick = {submit}></input>
      </form>
     </div>
   )
 }

当我使用Chrome时，似乎没有出现此问题。

Answer 1

通过添加]非常容易解决。

z-index:1
到装货部门。>