css - z-index 未按预期使用 before 伪元素呈现

Question

为什么 #para1 不呈现 above #para1:before？
<强> CODEPEN HERE

.para {
  color: #fafafa;
}
#para1 {
  background: blue;
  padding: 0 0 20px 0;
  position: relative;
  z-index: 2;
}
#para1:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 0px;
  border: 150px solid rgba(0, 0, 0, 0);
  border-top: 0px solid rgba(0, 0, 0, 0);
  border-right: 50px solid rgba(0, 0, 0, 0);
  border-left: 500px solid rgba(0, 0, 0, 0);
  border-bottom-color: red;
  z-index: 1;
  display: block;
}
#para1 {
  font-size: 40px;
}

<div id="para1" class="para"><span class="hpro">HELLO <span class="bold">WORLD</span> </span> <span class="satisfy">pre launch contest festival</span>
</div>

Answer 1

因为 #para 正在建立一个新的 stacking context本身。

尝试移除它的 z-index 并给它的伪 child 元素一个负的 z-index #para:before如下:

.para {
  color: #fafafa;
}
#para1 {
  background: blue;
  padding: 0 0 20px 0;
  position: relative;
  /*z-index: 2;*/
}
#para1:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 150px solid rgba(0, 0, 0, 0);
  border-top: 0 solid rgba(0, 0, 0, 0);
  border-right: 50px solid rgba(0, 0, 0, 0);
  border-left: 500px solid rgba(0, 0, 0, 0);
  border-bottom-color: red;
  z-index: -1;
}
#para1 {
  font-size: 40px;
}

<div id="para1" class="para"><span class="hpro">HELLO <span class="bold">WORLD</span> </span> <span class="satisfy">pre launch contest festival</span>
</div>