Can not align text undeneath overlapping images - html

Question

I am trying to get text to display under my overlapping images. I have two images side by side which are to be voted on so the "VS" image overlaps the other two images in the middle which works perfectly. When I try to get text to display under each image to be voted on, however, it seems to display towards the top behind the images, not underneath as it would normally.
Here's a codepen of what it does at the moment:
http://codepen.io/anon/pen/qdemaz
html:
​<div align="center">
<div id="vs">
<img id="png1" src="/puppies/8.jpg" /><p
class="left">username<br>Description<br>Puppies name</p>
<img id="png2" src="/images/vs.png" />
<img id="png3" src="/puppies/8.jpg" /><p
class="right">username<br>Description<br>puppies name</p>
</div>
</div>
css:
​#png1 {
position:absolute;
top:30px;
left:0;
z-index:0;
}
#png2 {
position:absolute;
top:100px;
left:260px;
z-index:1;
}
#png3 {
position:absolute;
top:30px;
left:315px;
z-index:0;
}
#vs{
position: relative;
width: 620px;
height: 310px;
}
p.left{
position:absolute;
top:315px;
left:0px;
z-index:4;
text-align:left;
}
p.right{
position:absolute;
top:315px;
left:315px;
z-index:4;
text-align:left;
}

Answer 1

I think I see what you're looking to do. You're setup isn't the best. I reworked the HTML/CSS, is this what you want:
http://codepen.io/anon/pen/pJMeGr
a{
display: inline-block;
vertical-align: top;
position: relatve;
z-index: 9;
}
img{
display: inline-block;
border: 1px solid #333;
}
.left{
margin-right: -15px;
}
.right{
margin-left: -10px;
}
#vs{
text-align: center;
}
.vs{
display: inline-block;
vertical-align: top;
position: relative;
z-index: 10;
border: 1px solid #000;
margin-top: 8px;
}
<div>
<div id="vs">
<a class="left" href="#"><img src="http://placehold.it/120x120" />
<br>puppies name
<br>username
<br>Description
</a>
<img class="vs" src="http://placehold.it/100x100" />
<a class="right" href="#"><img src="http://placehold.it/120x120" />
<br>puppies name
<br>username
<br>Description
</a>
</div>
</div>