::before 伪元素未显示在表单下方，尽管 z-index -1 设置

Question

我遇到一个问题，使用 ::before 创建的元素没有出现在表单下方。即使将 z-index 设置为 -1 后，它也不起作用。我该如何解决这个问题？

.form::before {
  content: "";
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: -100px;
  right: -100px;
  background-color: red;
  z-index: -1;
}

.form {
  position: relative;
  z-index: 1;
}

<div class="wrapper">
  <form action="#" class="form">
    <h1 class="form-title">Login Here</h1>
    <label for="username">Username</label>
    <input type="text" id="username" name="username" placeholder="Email or Phone">
    <label for="password">Password</label>
    <input type="text" id="password" name="password" placeholder="Password">
    <button type="submit">Log In</button>
  </form>
</div>

Answer 1

您需要将 z-index 从需要在其下面有伪元素的元素移动到父元素，然后它就可以工作。

.form::before {
  content: "";
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: -100px;
  right: -100px;
  background-color: red;
  z-index: -1;
  isolation: isolate;
}

.form {
  background-color: orange;
  position: relative;
}

.wrapper {
  z-index: 1;
}

<div class="wrapper">
  <form action="#" class="form">
    <h1 class="form-title">Login Here</h1>
    <label for="username">Username</label>
    <input type="text" id="username" name="username" placeholder="Email or Phone">
    <label for="password">Password</label>
    <input type="text" id="password" name="password" placeholder="Password">
    <button type="submit">Log In</button>
  </form>
</div>