title: Position badge over corner of image automatically
body: <p>I have a layout where images "float" within a certain area. The layout looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/8HyDs.png" alt="Layout Example"></p>
  
  <p>The source like this:</p>
  
  <pre><code>&lt;div class="free_tile"&gt;
    &lt;a class="img_container canonical" href="/photos/10"&gt;
      &lt;img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile"&gt;
      &lt;!-- EDIT: I am aware that I can put the badge here. See the edit notes and image below. --&gt;
    &lt;/a&gt;
    &lt;div class="location"&gt;Houston&lt;/div&gt;
    &lt;div class="taxonomy"&gt; T6 | Conduit | Infrastructure &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS looks like this (in SCSS):</p>
  
  <pre><code>div.free_tile { width: 176px; height: 206px; float: left; margin: 0 20px 20px 0; position: relative;
    &amp;.last { margin: 0 0 20px 0; }
    a.img_container { display: block; width: 176px; height: 158px; text-align: center; line-height: 156px; margin-bottom: 10px; }
    img { margin: 0; border: 1px solid $dark3; display: inline-block; vertical-align: middle; @include boxShadow;
      &amp;.canonical { border: 1px solid $transect; }
    }
    .location, .taxonomy { width: 176px; }
    .location { font-weight: 700; }
    .taxonomy { line-height: 10px; font-size: 10px; text-transform: uppercase; height: 20px; overflow: hidden; }
  }
  div.transect_badge { height: 20px; width: 20px; background: url('/images/transect-badge.png'); }
  </code></pre>
  
  <p>So, basically the images are sitting vertically-aligned middle and text-aligned center, and they have a maximum width of 176 and max height of 158, but they're cropped to maintain the original aspect ratio so the actual top corner of each image falls differently depending on which image it is.</p>
  
  <p>I have a badge that I'd like to put in the top corner of certain images (when the image is "canonical"). You see the style for this above (<code>div.transect_badge</code>).</p>
  
  <p>The problem, of course, is I don't know where the top corner of the image will be so I can't hardcode the position via CSS.</p>
  
  <p>I assume that I'll need to do this via jQuery or something. So, I started with a jQuery method to automatically append the badge div to any canonical images. That works fine, but I can't figure out how to position it over the top left corner.</p>
  
  <p><strong>How can this be done? (ideally using just HTML and CSS, but realistically using JS/jQuery)</strong></p>
  
  <p>--EDIT--
  Here's the problem: The image is floating inside a container, so the corner of the image might fall anywhere inside the outer limits of the container. Here's an example of what happens if I try to use <code>position:absolute; top:0; left:0</code> inside the same container the image is bound by:
  <img src="https://i.stack.imgur.com/y8ql4.png" alt="The problem"></p>