设置z-index:-1后，::before伪元素仍无法显示在表单下方的解决方法

问题根源 #

你给.form设置了position: relative和z-index: 1，这会让.form创建一个独立的堆叠上下文。伪元素::before作为.form的堆叠逻辑子元素，它的z-index: -1只能在.form的内部堆叠层级生效——也就是在表单内容的下方，但无法跑到.form元素本身的下面。如果表单有背景色，伪元素会被完全盖住；即便没有背景色，它也无法突破.form的堆叠上下文，显示在表单的“后方”。

解决方案 #

方案1：移除.form的z-index设置

只要去掉.form的z-index: 1，它虽然还是position: relative，但不会创建独立的堆叠上下文。此时伪元素的z-index: -1会相对于父容器.wrapper的堆叠上下文，就能正常显示在表单下方。

修改后的CSS代码：

.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 */
}

方案2：将伪元素移到父容器.wrapper上

如果必须保留.form的z-index，可以把伪元素绑定到.wrapper上，让它的堆叠层级独立于表单。此时设置z-index: -1就能让伪元素显示在表单下方。

修改后的CSS代码：

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

.wrapper {
  position: relative;
}

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

HTML结构无需修改。

内容的提问来源于stack exchange，提问作者Farzane Sajadian