CSS Newbie: Position a Div over Each of a Row of Photos

I'm new to CSS and racking my brain on the following:

I have a row of images that are sourced from a database query. I display the photos in a row which wraps within a page. For example, if there are 20 photos, it will display 5 per row based on the width of the page and the photo.

My challenge: I want to position a DIV in the same relative spot on each photo. This div will contain a link to take an action on the photo. All of the action code is working, but I cannot, for the life of me, correctly position the DIV.

I can't post an image of the mockup I'm trying to achieve (I'm too new), but here's a description:

Imagine a row of photos the size of a postage stamp. In the upper right corner of each, is a gray box containing a link. I'm unable to consistently position the gray box in the same relative position on each photo. Each photo is the same size, but since the number of photos is unknown, I can't simply "pos开发者_运维问答ition:abosulte;" the action box manually.

My HTML looks roughly as follows: I've simplified the loop; its a dump of a query from ColdFusion of an indeterminate number of photos.

<LOOP>

    <div id="photo" style="display:inline;"><img src="abc"></div>
    <div id="redBox" style="????"><a href="javascript:action(photo);">ACTION</a></div>

</LOOP>   

Thoughts?

Many kind thanks in advance.

Probably easier to add your box within this div, something like:

<div id="photo" style="display:inline;">
<div id="redBox" style="position:relative;top:-10px;left:-10px"><a    href="javascript:action(photo);">ACTION</a></div>
<img src="abc">
</div>

You could then offset as required using position:relative (you'll see I've guessed the amounts above, but you can obviously tweak to suit!)

Hope this helps!

Try

<style>
#photo {
    display: inline-block;
    position: relative;
}
.action {
    /* Optional */
    background: #CCC;
    color: #FFF;
    padding: 2px 3px;
    /* Necessary */
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}
</style>


<div id="photo">
    <div class="action">Foo</div>
    <img src="abc">
</div>

maybe you could wrap it all in another div?

<LOOP>
    <div class="container" style="display: inline-block;">
        <div class="photo"><img src="abc"></div>
        <div class="redBox" style="position:relative; top: -20px; right; 10px;"><a href="javascript:action(photo);">ACTION</a></div>
    </div>
</LOOP>  

I may be wrong, but it looks like you're trying to reinvent the wheel...

Check out the map element (HTML4, HTML 5)