position close button inside a image - php

Question

I'm trying to put an anchor in the top-right of an image.
This is my view:
<div class="table">
<tr>
<?php foreach ($q as $row)
{
$var = $row->path;
$info = pathinfo($var);
echo '<td><a href="#" style= "position:relative">
<img src="'.base_url().'images/thumbs/'.$info['basename'].'"/>
</a>'.anchor('gallery/remove_photo/'.$row->id,'<i class="icon-remove"></i>','class="close"').'</td>';
}?>
</tr>
</div>
I've tried by set the position relative and the postion of the anchor absolute but it now works. I forgot to say that i'm using bootstrap 3

Answer 1

Why not just use an image map?
http://www.w3schools.com/tags/tag_map.asp
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
There are even some decent online tools to find the coordinates if needed like this one.
http://www.image-maps.com/

Answer 2

To position something absolutely (which is what you want to do), it has to have container that also has positioning set to position itself against. Sounds complex, but it's not really.
If you set your container to position:relative (meaning keep it in the flow of the document where it would normally be), then you can set descendant elements to position: absolute.
So, in your case, if you wrap your image and button in a div and set the div to position: relative, you can set the button to position: absolute like this:
<div style="position: relative;">
<img src="yourimagename.jpg" alt="">
<button style="position: absolute; top: 0; right: 0; z-index: 1;">&times</button>
</div