Автоматически размещать значок над углом изображения

У меня есть макет, в котором изображения "плавают" в определенной области. Макет выглядит следующим образом:

Источник такой:

<div class="free_tile">
  <a class="img_container canonical" href="/photos/10">
    <img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
    <!-- EDIT: I am aware that I can put the badge here. See the edit notes and image below. -->
  </a>
  <div class="location">Houston</div>
  <div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>

CSS выглядит так (в SCSS):

div.free_tile { width: 176px; height: 206px; float: left; margin: 0 20px 20px 0; position: relative;
  &.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;
    &.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'); }

Итак, в основном изображения располагаются по центру по вертикали и по центру по тексту, и у них есть максимальная ширина 176 и максимальная высота 158, но они обрезаются для сохранения исходного соотношения сторон, поэтому фактический верхний угол каждого изображения падает по-разному в зависимости от того, какое это изображение.

У меня есть значок, который я бы нравится помещать в верхний угол определенные изображения (когда изображение "каноническое"). Вы видите стиль для этого выше ( div.transect_badge ).

Проблема, конечно, в том, что я не знаю, где будет верхний угол изображения, поэтому я могу ' • жестко закодируйте позицию через CSS.

Я предполагаю, что мне нужно будет сделать это через jQuery или что-то в этом роде. Итак, я начал с метода jQuery для автоматического добавления div значка к любым каноническим изображениям. Это работает нормально, но я не могу понять, как расположить его в верхнем левом углу.

Как это можно сделать? (в идеале с использованием только HTML и CSS, но реально с использованием JS / jQuery)

- EDIT-- Проблема вот в чем: изображение плавает внутри контейнера, поэтому угол изображения может упасть в любом месте за пределы контейнера. Вот пример того, что произойдет, если я попытаюсь использовать position: absolute; верх: 0; left: 0 внутри того же контейнера, в котором изображение привязано: