Z-index stacking mystery

HTML-CSS
1

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

<html>
<head>
 <style>
  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;}
  </style>
</head>
<div class='c c1'>&#127153;</div>
<div class='c c2'>&#127153;</div>
<div class='c c3'>&#127153;</div>
</html>

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

2

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:

3

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

4

Congrats on figuring it out. Happy coding!