如何讓這些div垂直堆疊？

我知道之前有類似的問題，但我已經嘗試了所有我能找到的解決方案（涉及位置：相對於外部div和位置：絕對內部div），但我不能我得到紅色的div對齊在綠色的下面，而不是堆疊在它的頂部。如何讓這些div垂直堆疊？

HTML：

<body> 
    <div id="outer_div"> 
     <div id="title_div"> 
     </div> 

     <div id="main_div"> 
     </div> 
    </div> 
</body/>

CSS：

body { 
    height: 1000px; 
    width: 1000px; 
    margin: 0; 
    padding: 0; 
} 

#outer_div { 

    position: relative; 
    height: 100%; 
    width: 100%; 
    background-color: blue; 
    display: block; 
}  

#title_div { 
    top: 0; 
    left: 0; 
    position: absolute; 
    height: 25%; 
    width: 100%; 
    background-color: green; 
    display: block; 
} 

#main_div { 
    top: 0; 
    left: 0; 
    position: absolute; 
    height: 20%; 
    width: 100%; 
    background-color: red; 
    display: block; 
}

Here's the jsFiddle link.

謝謝！

來源

2013-10-04 Ben Elliott

divs是塊元素，所以自然地自上而下地流動 - 爲什麼你需要改變它們的默認位置？紅色和綠色從0,0開始，那麼你期望什麼？刪除一切，但顏色風格，也許高度和寬度，看看會發生什麼 –

我已經更新您的jsfiddle與可能的解決方案（http://jsfiddle.net/denisonluz/kFaVe/1/） –

@ jenson-button-event，you '完全正確。這會教我編碼的晚，使問題複雜化，然後試圖抽象它。謝謝:) –