css - JavaScript で生成された div を使用した CSS の配置が期待どおりに機能しない

Question

まず、謝罪しなければなりません。CSS ポジショニングは常に私の存在の悩みの種であり、これはおそらく私が完全に見逃している単純なものです...

とにかく、div を生成する JS スクリプトがあります。各 div は、絶対配置された親 #container 内にあります。以下のCSS：

#container{
  position: absolute;
}
#container div{
  position: relative;
}

div を作成する関数は次のとおりです。

function newLine(){
  var id_num = ++line;
  var _new;
  var i;
  for(i = 0; i < width; i++){
    _new = document.createElement('div');
    _new.innerHTML = randomChar();
    _new.id = id_num;
    _new.style.left = i*10+'px';
    _new.style.top = 0;
    document.getElementById('container').appendChild(_new);
  }
}

上記のすべてが適切に初期化されています。左のポジショニングは完璧に機能します。唯一の問題は縦位置です。すべての行が隣り合って表示されるのではなく、div の上部から徐々に増加しています。これは私が完全に見ている些細なことだと確信していますが、困惑しています...助けていただければ幸いです!