title: CSS Positioning an icon at the top right side of the image
body: <p>I'm trying to position a <code>close</code> icon from bootstraps sprite, in the top right side of the image ( not the box). I took this from a working example, but it wont work for me. It always ends up outside the box and at the right corner of the screen.</p>
  
  <p>How can I get this right? I've setup a fiddle, but could not figure how to get the sprite in there. Can you help?</p>
  
  <p><a href="http://jsfiddle.net/eugbrqwc/" rel="noreferrer">Fiddle</a></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link media="screen" type="text/css" href="icons.css" rel="stylesheet"&gt;
      &lt;title&gt;Delete Image Icon Dev&lt;/title&gt;
  
  &lt;style&gt;
  
  img.thumbnail {
      background: none repeat scroll 0 0 #FFFFFF;
  }
  
  .image:before {
      content: "";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
  }
  
  .image {
      -moz-box-sizing: border-box;
      border: 1px solid #DDDDDD;
      box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
      float: left;
      height: 150px;
      margin-bottom: 10px;
      padding: 10px;
  }
  
  .image img {
      vertical-align: middle;
  }
  
  .delete {
      position:absolute;
       top:0;
      right:0;
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="image"&gt;&lt;img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg"&gt;&lt;i class="icon-remove blue delete"&gt;&lt;/i&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>