Html zindex不处理伪元素

css大师。我已经在谷歌上搜索了一段时间，但没有成功。当前，我在尝试设置before伪元素的zindex时遇到问题。它适用于我的一个云（第5行），但一旦我用另一个类重写transform属性，它似乎就会忽略z-index:-1。你会注意到云上有一个巨大的白色圆圈（伪元素）

代码笔在这里：

云伪元素css

    .cloud:after, .cloud:before {
  background: #fff;
    content: '';
    position: absolute;
    z-index: -1;
}

.cloud:after {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;

    height: 100px;
    left: 50px;
    top: -50px;
    width: 100px;
}

  .cloud:before {
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;

    width: 180px;
    height: 180px;
    right: 50px;
    top: -90px;
  }

一旦我尝试引入转换

.cloud-group-1 .biggest-2x {
  transform: scale(3);
  -webkit-transform: scale(3);
  top: 400px;
}

---

它似乎忽略了z:索引，我不知道为什么。

请参见此处选择的答案：我怎么会错过它！！！非常感谢在这里看到选择的答案：我怎么会错过这个！！！非常感谢