爲什麼沒有絕對定位的元素忽略它的兄弟位置，出現後呢？

<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一起工作在這種情況下，。任何人都可以解釋爲什麼圖片上的行爲沒有發生？

來源

2016-05-04 Alexander Lomia

嚴格地說，被消除的元素仍然應該忽略流入的兄弟。但是你的圖片與你的代碼不匹配 - 其中之一是，被消除的元素被錨定在左側，而不是右側。 – BoltClock

@BoltClock我拍下了這個確切的代碼。我猜其他事情也在發生，因爲我仍然無法解決問題 –

這是由於怎樣的<a>顯示在CSS來表示。通常是display: inline。絕對定位works quite differently當position: relative祖先是內嵌元素：

的元素的包含塊的定義如下：

如果元素「的位置是：絕對‘的‘位置」，包含塊由最近的祖先與建立’絕對’，‘相對’或‘固定’，以下面的方式：

在這種情況下，所述祖先是內聯元素，包含塊是邊界框圍繞爲該元素生成的第一個和最後一個行內框的填充框。在CSS 2.1中，如果內聯元素被分割成多行，那麼包含塊是未定義的。

由<a>（以包含<img>）是相同的高度行框，它在和<img>的高度，這本身就是內聯的，是不相關的產生的行內框。因此，被消除的元素放置在與<img>所在的線框相同的高度。 <img>的定位方式是因爲它位於<a>的基線上。

如您所見，將<a>設置爲display: block會產生預期的行爲。

來源

2016-05-04 15:43:54 BoltClock

新的答案：

由於@ISuthan巴拉寫道：<a>是內聯元素，所以你要你的親戚類添加到一個額外的DIV的<a>標籤中：

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>

來源

2016-05-04 15:38:44 Johannes

當你絕對定位它時，就已經發生了。 – BoltClock

感謝您的回覆。 'position：relative;'儘管''是一個內聯元素。我添加了'display：inline-block;'，但沒有任何改變。 –

<a>是inline，您必須將其更改爲block並設置寬度或inline-block以使其假定它的寬度'的內容。

包括的jsfiddle，以反映你瞄準：https://jsfiddle.net/gq30uct4/

來源

2016-05-04 15:42:45

爲什麼沒有絕對定位的元素忽略它的兄弟位置，出現後呢？

回答

相關問題