爲什麼這個絕對定位的元素沒有相對於其容器定位？

我有這個簡單的代碼並排放置兩個div #container元素。在每個這些都有一個孩子div #child，我想相對於其父母（div #container）。爲什麼這個絕對定位的元素沒有相對於其容器定位？

<style> 
.container { 
    float:left; 
    margin-right: 10px; 
} 

.child { 
    position: absolute; 
    left: 0.2ex; 
} 
</style> 

<div class="container">a<br/> 
    <div class="child">b</div> 
</div> 
<div class="container">c<br/> 
    <div class="child">d</div> 
</div>

然而，而不是結果，我希望 - 「d」位於下方的「C」，但小幅上推到右邊，「d」，而不是被定位在「B」，並稍微向右。換句話說，絕對位置已經被渲染成相對於頁面而不是它的包含元素。

爲什麼會出現這種情況？我在這裏誤解了絕對定位？
我如何獲得我期待的行爲？

看到這個jsFiddle。

來源

2012-10-23 Tim MB

絕對定位元件定位相對於它們的含有塊，其被定義爲第一祖先不是position: static的邊緣。

沒有一個祖先元素是position: static，所以它是相對於視口的初始位置。

設置position: relative在.container元素，如果你真的想絕對定位它們。

這就是說，它看起來像你會更好做這個：

.child { 
    margin-left: 0.2ex; 
}

來源

2012-10-23 16:11:12 Quentin

出於好奇是什麼恩代表，從來沒有看到過？ –

[x-height]（http://www.w3.org/TR/css3-values/#ex-unit） – Quentin

謝謝感謝！我不確定我想要使用一個可以像這樣的邊緣變化的測量，但是對於他們自己我想。 –

要定位孩子相對於父母的位置，只需將position:relative添加到父母的風格 - 那麼所有位置：絕對子女將相對於父母絕對。

.container { 
    float:left; 
    margin-right: 10px; 
    position:relative; 
}

來源

2012-10-23 16:09:25

爲什麼這個絕對定位的元素沒有相對於其容器定位？

回答

相關問題