Image over another image - not working

[sleepyw]

This is driving me nuts. I've stripped the code down to the most basic elements. I've looked online at other examples. But I cannot get this to work.

 

I basically have a big image gallery, and in the bottom-right corner of each thumbnail, I want to overlay a small clickable icon.

 

However, the last image of a row (for example, if I have 3 rows of images, the last one on the right of each column) will not show the icon. If I try it with just one image, nothing shows up at all for an overlay.

 

Here's the code:

<div style='text-align: center; padding: 5px; margin: 0px; margin-right: 0px; float: left; width: 120px; position: relative;'>
<img src='images/hires.png' style='position: absolute; top: 40px; left: -60px;'>
<img src='images/folder_orange.png'>
</div>

<div style='text-align: center; padding: 5px; margin: 0px; margin-right: 0px; float: left; width: 120px; position: relative;'>
<img src='images/hires.png' style='position: absolute; top: 40px; left: -60px;'>
<img src='images/folder_orange.png'>
</div>

 

The resulting page looks like this:

I've played with the code so many ways, but can't figure this out. Anyone?

Edited March 11, 2016 by sleepyw

[sleepyw]

Just to show multiple rows and the behavior of how the last item in each row doesn't show the overlayed icon:

[sleepyw]

Problem solved....was a combination of a minor CSS issue (z-index) and an order issue with the PHP generating some of the images.