title: Why doesn't absolutely positioned element ignore it's sibling position, appearing after it?
body: <p><code>&lt;a&gt;</code> is positioned <em>relatively</em>, while <code>&lt;span&gt;</code> <em>is nested inside it and is positioned absolutely</em>. Yet, <code>&lt;span&gt;</code> appears below the <strong>bottom</strong> left corner of the image, instead of appearing at <strong>top</strong> left corner of it's relative parent. I can't understand <strong>why does it not ignore</strong> it's sibling's position.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>.pos-rel {
      position:relative;
  }
  
  .pos-abs {
      position:absolute;
      top:0px; 
      right:0px;
  }
  
  &lt;a href="#" class="pos-rel"&gt;
      &lt;img src="http://placehold.it/270x270" class="img-responsive"&gt;
      &lt;span class="label label-primary pos-abs"&gt;Overlay&lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Picture of an expected behavior:</p>
  
  <p><a href="https://i.stack.imgur.com/sfSY7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sfSY7.png" alt="enter image description here"></a></p>
  
  <p>It is most likely that I don't understand how <code>position:relative</code> and <code>position:absolute</code> work together in this case. Can anyone explain why the behavior illustrated on the picture is not taking place?</p>