CODEWITHSUNDEEP
cssz-index
Anubhav
Anubhav

Reputation: 7208

z-index not rendering as expected with before pseudo-element

Why isn't #para1 rendering 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>

Upvotes: 0

Views: 65

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99534

Because the #para is establishing a new stacking context itself.

Try removing its z-index and give a negative z-index to its pseudo child element #para:before as follows:

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

Upvotes: 2

Related Questions