0

The Green span text should be over the blue box.

I don't know why it is not working, even z-index for Green span is higher than the blue box.

.green, .blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  height: 100px;
  text-align: center;
}

.green {
  top: 60px;
  left: 60px;
  background: green;
  z-index: 1;
}
.green span {
  z-index: 3;
}

.blue {
  top: 100px;
  left: 100px;
  background: blue;
  z-index: 2;
}
<div class="green">
  <span>Green</span>
</div>
<div class="blue">
  <span>Blue</span>
</div>

Expected result is below;

enter image description here

How can I make Green span is over the blue box?

Diamond
  • 3,470
  • 2
  • 19
  • 39
  • it cannot, its parent stand on top of the other box. z-index value are from the closest parent positionned. blue is z-index: 2 , every children are on that level. you can set a z-index to the children, but , 0 will start from the parent and different z-index will only be among the children with no effect on the z-index parent on the outside – G-Cyrillus Nov 20 '19 at 21:07
  • is the text supposed to blend through ? – G-Cyrillus Nov 20 '19 at 21:12
  • @G-Cyr Is there any way to fix this with any position style without changing html hierachy? – Diamond Nov 20 '19 at 21:13
  • Don't define any z-index for the green div and do it only for the blue and the content of the green – Temani Afif Nov 20 '19 at 21:22
  • 2
    here you go: https://jsfiddle.net/utrzmkw0/ don't forget the position:relative on span – Temani Afif Nov 20 '19 at 21:26
  • @TemaniAfif Thanks! Old friend! I hoped you helped me when posting my question. – Diamond Nov 20 '19 at 21:28

0 Answers0