z-index and <a href> - php

Question

I have a sequence of 5 user images that I am stacking horizontally using a z-index. i.e: <img src="xxxx" style="z-index:5;position:relative;"> and then z-index 4...3..etc.
I now want to link these images to the user's 'profile'. If I surround my <img> with an <a> it breaks the formatting. It just shows the images in a line (with the z-indexes still correct(!?)) instead of overlapped. I tried just <img> and also <img> but nothing has worked.
<?php $count = 5; ?>
<?php foreach($today_all_result as $today_all_results) : ?>
<a href="<?php echo BASE_URI; ?>/user/?user=<?php echo $today_all_results->user_id; ?>" style="position:relative;z-index:<?php echo $count; ?>">
<img src='<?php echo BASE_URI; ?>/images/userImages/<?php echo $today_all_results->userPicture; ?>' class="pic-athlete <?php echo $stacked; ?>" style="z-index:<?php echo $count; ?>;position:relative;">
</a>
<?php $count--; ?>
<?php $stacked = "stacked"; ?>
<?php if($count <= 0) break; ?>
<?php endforeach; ?>
Does anyone know how to fix this? Thank you in advance!

Answer 1

Change the style from position: relative; to position: absolute;
img{
height: 100px;
width: 100px;
position: absolute;
}
<img src="" style="background-color: blue; z-index: 10;"/>
<img src="" style="background-color: green; z-index: 2;"/>
<img src="" style="background-color: red; z-index: 3;"/>
Another example:
img{
height: 100px;
width: 100px;
position: absolute;
}
<img src="" style="background-color: blue; z-index: 1;"/>
<img src="" style="background-color: green; z-index: 2; left: 20px; top: 20px;"/>
<img src="" style="background-color: red; z-index: 3;left: 40px; top: 40px;"/>