React：子コンポーネントが正しくレンダリングされない

Question

ページ上にいくつかの「付箋」を表示するReactで掲示板アプリケーションを設計する方法を学んでいます。コンポーネントが正常に動作している間、私はページ上の「ノート」が相互にレンダリングされていると考えています。 Sticky Notes rendering over each other(left screen)。ここに私のコードのHTML、CSS、およびJavaScriptファイルがあります。 https://drive.google.com/open?id=0Bx_XCzMeXydQcm1pQ3Z6d3NOVXM

複数のコンポーネントをレンダリングすることは問題ではないと思います。もしNote6jsのBoard Componentのrender（）関数の86行を<h1 key={i}>{note}</h1>に変更して実行すると、別の行に出力が表示されてしまいます（スクリーンショットイメージの右ウィンドウを参照）

助けてください！

Answer 1

おそらくノートCSSクラスに設定した位置に問題があります。

div.note { 
    height: 150px; 
    width: 150px; 
    background-color: yellow; 
    margin: 2px 0; 
    position: absolute; /* This line */ 
    cursor: -webkit-grab; 
    -webkit-box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, .2); 
    box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, .2); 
} 

他の人がそれを修正し、修正することができるように、より良いフィドルを作成し、float: left;