How do I automatically stack divs vertically inside a parent?

Question

Here\'s what I am trying to accomplish...

1. \"parent\" has position:relative
2. \"div 1-3\" have position:absolute

However, whenever I do this,

Answer 1

Should be straight:

HTML:

CSS:

.container {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #ffbf00;
}
.red {
    background-color: #f00;
    width: 200px;
    height: 150px;
    margin: 5px auto;
}
.blue { 
    background-color: #0f0;
    width: 200px;
    height: 150px;
    margin: 5px auto;
}
.green {
    background-color: #00f;
    width: 200px;
    height: 150px;
    margin: 5px auto;
}

Check this fiddle.