title: Absolute position relative to an image
body: <p>Is there a way to position an element relative to an <code>img</code> tag?</p>
  
  <p>Of course I can make this image inside a div, and then position the element relative to this div. But let's say the image is already positioned, and i don't want to add other elements.</p>
  
  <p>Here's a sample: <a href="http://jsfiddle.net/bortao/MQf3D/" rel="nofollow">http://jsfiddle.net/bortao/MQf3D/</a></p>
  
  <p>The blue div should go on the left top corner of the image (0px/0px)</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;img class="im" /&gt; 
  &lt;div class="di"&gt;Absolute&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.im {
      position: relative;
      left: 20px;
      top: 60px;
  }
  
  .di {
      position: absolute;
      left: 0px;
      top: 0px;
      border: solid 1px blue;
  }
  </code></pre>