[CSS] 親要素の中でabsoluteな表示をしたい

Question

上をイメージして次のようなCSSを書いた結果下のようになってしまいました。

top:0pxは同じなのに、縦位置が明らかにずれるのはなぜでしょう？
また、どのようにすれば上のようになりますか？

<div id='container'>
  <div id='box1'></div>
  <div id='box2'></div>
</div>

#container{
  position:absolute;
  top:100px;
  left:100px;
  height:300px;
  width:500px;
  border:3px solid black;
  
}
#container > div{
  position:relative;
  width:100px;
  height:100px;
}

#box1{
  left:100px;
  top:0;
  background:blue;
}
#box2{
  top:0;
  left:250px;
  background:red;
}

Answer 1

positionプロパティの、
relativeとabsolute値の意味を勘違いしているようです。
relativeは、絶対座標配置の子要素（absoluteを効かせた要素）の基準位置となりますので、
relativeは、親要素に効かせるものです。
よって、#containerに効かせるべきです。
対して、子要素を絶対座標で扱いたいようなので、
absoluteは、#container > divに効かせるべきです。

Answer 2

やり直したら

position:relative;

のところを

position:absolute;

に直すだけでいけました。
（似たような構成で親要素を無視して画面上端に配置されてしまうこともあって、それとの違いが分かりません・・・）