Z-index stacking mystery

I’m trying to make a unicode cardgame using css and z-index.

  div.c {position:absolute;font-size:10vw; width:10vw; height:12vw; color:red;}
  div.c1 {left:1vw; top:1vw; z-index:1;}
  div.c2 {left:3vw; top:3vw; z-index:2;}
  div.c3 {left:5vw; top:5vw; z-index:3;}
<div class='c c1'>&#127153;</div>
<div class='c c2'>&#127153;</div>
<div class='c c3'>&#127153;</div>

Here are two version - the second adding background:white;
Neither looks right. What do I need to do?

I think that it just has to do with vertical space associated with the unicode characters. If you look here, you can see the size of each div exceeds the images:

Thank you! All I needed was to make line-height match the font size, and switch from div to span.

Congrats on figuring it out. Happy coding!