css div的位置

Question

我已經看了全部，似乎無法找到正確的答案。這些div都是從數據庫動態創建的。恩。

<div class="accordian_header"><div class="title"> any title </div></div> 
<div class="accordian_body"> 
    <div class="topleft"> info....</div> 
    <div class="topright"> info...</div> 
</div> 

現在我想通過這門課「左上」將在的「accordian_body」分區和「topright」是在右上角的左上角。問題是，如果我將它們分配給position：absolute，那麼它們會離開頁面的右上角。如果我選擇其他類型的定位，則不起作用。

現在，如果我將「accordian_body」設置爲position：絕對，然後是topright和topleft的工作。問題是我創建它們都是動態的，所以它們不能是絕對的。他們需要在彼此的頂部創建，不留任何職位屬性工作正常。我發現，對於「topleft」和「topright」，我可以使用float：left或right並且可以工作，但是如果我想要文本或頂部或底部的圖像，那麼到目前爲止我還沒有運氣。

Answer 1

嘗試爲.accordion_body設置position: relative。然後，其中絕對定位的元素將關注該容器而不是他們正在使用的任何祖先，而不會中斷文檔的正常流動。

Answer 2

使容器relative，那麼你可以絕對定位的孩子。

CSS

.accordian_body { 
    position: relative; 
} 
.topleft { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.topright { 
    position: absolute; 
    top: 0; 
    right: 0; 
}