为什么没有绝对定位元素忽略它的兄弟位置，出现在它之后？

Question

<a>位于相对，而<span> 嵌套在其中并且绝对定位。然而，<span>显示在图片左下角的底部下方，而不是出现在它的相对父级的顶部左下角。我无法理解为什么不忽视这是兄弟姐妹的立场。

这是我的代码：

.pos-rel {
    position:relative;
}

.pos-abs {
    position:absolute;
    top:0px; 
    right:0px;
}

<a href="#" class="pos-rel">
    <img src="http://placehold.it/270x270" class="img-responsive">
    <span class="label label-primary pos-abs">Overlay</span>
</a>

预期行为的图片：

在这种情况下，我很可能不理解position:relative和position:absolute如何协同工作。任何人都可以解释为什么图片中所示的行为没有发生？

Answer 1

这是由于<a>的显示以CSS表示的方式。通常，它是display: inline。 position: relative祖先是内联元素时的绝对定位works quite differently：

  

元素的包含块定义如下：

     

  

1. 如果元素具有'position：absolute'，则包含块由最近的祖先建立，其位置为'absolute'，'relative'或'fixed'，其方式如下：

        
     
   1. 在祖先是内联元素的情况下，包含块是为该元素生成的第一个和最后一个内联框的填充框周围的边界框。在CSS 2.1中，如果内联元素被分割为多行，则包含的块是未定义的。
     
  

<a>生成的内联框（包含<img>）与其所在的行框高度相同，<img>的高度本身也是内联，无关紧要。因此，absposed元素放置在与<img>所在的线框大致相同的高度。 <img>的位置与它的位置相同，因为它位于<a>的基线。

可以想象，将<a>设置为display: block会产生预期的行为。

Answer 2

inline为block，您必须将其更改为inline-block并设置宽度或ItemSource以使其假定其内容的宽度。

包括jsfiddle以反映您的目标：https://jsfiddle.net/gq30uct4/

Answer 3

新答案：

正如@ISuthan Bala所写，<a>是内联元素，因此您必须将您的相对类添加到<a>标记内的其他DIV：

http://codepen.io/anon/pen/VaqmWN

.pos-rel {
    position:relative;
}

.pos-abs {
    display: block;
    position:absolute;
    top:0px; 
    left:0px;
}

<a href="#">
  <div class="pos-rel">
    <img src="http://placehold.it/270x270" >
    <span class="label label-primary pos-abs">Overlay</span>
  </div>
</a>