元素與絕對位置相對被放置到非定位的父元素

Question

我的CSS定位的認識一直以來，對於一段時間，與position:absolute和left，top，right或指定bottom元件使用這些數字相對於所述最接近的放置祖先元素position:relative或相對於文檔如果沒有這樣的祖先元素。

在創建一個測試腳本來解釋某人的CSS定位時，我發現對於我來說，看起來很尷尬的行爲。正如你可以看到@http://jsbin.com/axocUCo/1/edit?html,output，我有.child爲position:absolute，它的父母.parent沒有定位，它的父母.grand_parent有position:relative。我已將.child設置爲left:0和top:0。但是孩子的位置相對於.parent而不是.grand_parent。爲什麼這樣？

我對CSS定位的理解不知何故有缺陷？或者，我在做一些愚蠢的事情嗎？

Answer 1

您的understanding is actually right它按預期工作，因爲您在css中的級聯存在問題。該孩子是<div>，因此具有在`divs中定義的樣式，其中包含邊距。嘗試添加這個孩子：

#absolute_relative .child { 
    margin: 0; 
    } 

注：這似乎是一個奇怪的現象，因爲這兩個孩子和家長有同樣的利潤率，因此這似乎是，如果孩子是相對父，但它不是。

Proof of concept: http://jsbin.com/eKOnOJO/1/。

Answer 2

你的理解是正確的，它在你的樣本中表現相同。它的邊距和百分比寬度和高度使它顯示爲相對於父項而非grandParent。

您可以嘗試在此處設置右側和底部屬性，並清楚地看到差異。

#absolute_relative .child{ 
     position: absolute; 
     width: 25%; 
     height: 25%; 
     right: 0px; 
     bottom: 0px; 
    } 

而且，這裏是一個小提琴清楚地說明此問題：Fiddle