Placing Delete icon on the corner of the image using jquery php css

Question

Here am throwing the images from database to a div in php while, here I want to delete the image by clicking on the delete icon which has to be in the top right corner of the every image pulled from db. How could I get a delete icon in the top right corner of the images? This is how I am displaying the images in a dialog box.

<?php        
$query = "SELECT * FROM files_images";    
$res = mysql_query($query);     
while ($row = mysql_fetch_array($res)) {
    echo "<div id='popimages'>";
    echo "<img title='$row[img]' id='$row[id]' style='width:100px;float:left; height:100px;margin-bottom:5px; margin-left:5px;border:2px solid #b06c1c;border-radius:10px;' src='http://localhost/PhpProject2/user_data/" . $row['filename'] . "'/>";
    echo "</div>";
}
?>

Answer 1

If I understand correctly, try outputting something like this :

HTML

  <div id='popimages'>
      <div class="image">
          <img class="btn-delete" onclick="alert('Do something!');" src="http://cdn1.iconfinder.com/data/icons/diagona/icon/16/101.png"/>
          <img title='$row[img]' id='$row[id]' style='width:100px;float:left; height:100px;margin-bottom:5px; margin-left:5px;border:2px solid #b06c1c;border-radius:10px;' src='http://i.i.com.com/cnwk.1d/i/tim/2011/03/16/Chrome-logo-2011-03-16.jpg'/>
      </div>
  </div>

CSS:

.image {
   width: 100px;
   height: 100px;
   position: relative;
}
.btn-delete {
   position: absolute;
   cursor: pointer;
   right: 2px;
   top: 2px;

   /* This was edited out because it was stupid. See fernholz's answer.
   left: 100%; 
   margin-left: -10px;
   margin-top: 2px; */
}

JSFiddle: http://jsfiddle.net/TK7zB/