title: Can't get image to be relative positioned
body: <p>I can't understand why is my figcaption not positioning correctly.</p>
  
  <p>I have my image as <strong>relative positioned</strong>.</p>
  
  <p>I have my figcaption as <strong>absolute positioned</strong>.</p>
  
  <p>That means, the figcaption with a <code>bottom: 60px</code> should be at 60px from the images bottom.</p>
  
  <p>But its not working, <code>figcaption</code> is getting the <strong>window as relative</strong>, and <strong>not the image</strong>.</p>
  
  <p><strong>My view</strong></p>
  
  <pre><code>  &lt;li class="item"&gt;
      &lt;figure&gt;&lt;%= image_tag photo.photo_url(:thumb), class: "spot-image" %&gt;
          &lt;figcaption class="spot-item-title"&gt;
              &lt;h4&gt;&lt;%= photo.title.truncate(30).downcase.capitalize %&gt;&lt;/h4&gt;
              &lt;span&gt;&lt;%= photo.pins.count %&gt; Productos etiquetados&lt;/span&gt;
          &lt;/figcaption&gt;
      &lt;/figure&gt;
     &lt;/li&gt;
  </code></pre>
  
  <p><strong>My sass</strong></p>
  
  <pre><code>.item {
      @include span-columns(3);
      @include omega(3);
      background: $spot-bg;
      .spot-image {
          border: 4px solid red;
          position: relative;
      }
      .spot-item-title {
          position: absolute;
          bottom: 60px;
      }
  }
  </code></pre>
  
  <p><strong>CSS OUTPUT EDIT</strong></p>
  
  <pre><code>  .item {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 23.23176%;
      background: #f3f3f3;
  
  
    .item .spot-image {
      position: relative;
      border: 4px solid red;
  
  
  
    .item .spot-item-title {
      position: absolute;
      bottom: 60px;}
  </code></pre>