如何让这些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 '完全正确。这会教我编码的晚，使问题复杂化，然后试图抽象它。谢谢:) –