title: Apply image in bottom right corner
body: <p>I need to apply a small image, a little badge, (bottom right) over some thumbnails of a gallery. The code is generate automatically by a plugin and looks like this. I can't change the order of the tags but I can edit the two lines marked with * (i.e. adding a classes, changing from span to div)
  It works with top but not with bottom (top: 0px; right: 4px) don't know why.</p>
  
  <pre><code>&lt;a href="/photos/fullpic.jpg"&gt;
  &lt;span&gt;
  *&lt;span style="position: relative; display: block;"&gt;
       &lt;img src="/photos/mythumbnail.jpg" alt="thumbnail"&gt;
      *&lt;img src="/photos/plugins/badge.png" style="position: absolute; bottom: 0px; right: 4px;"&gt;
     &lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p></p>
  
  <p>edit: Forgot to add. Each thumbnail has different height/width so I can't declare an height for the container. It needs to stick bottom right regardless the dimension of the container.</p>