Question

为什么<{1}}呈现 #para1？
的 CODEPEN HERE

＆＃13;

#para1:before

＆＃13;

.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;
}

＆＃13;

Answer 1

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

尝试删除其z-index，并为其伪子元素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>

z-index未按预期伪元素呈现

1 个答案: