title: CSS position: relative; children do not ignore each other
body: <p>I always used float. Recognized maybe its not the best way to go. Trying around with position relative.
  why the children of myDiv do not ignore each others top ? Because its not inline-block ?</p>
  
  <pre><code>&lt;div class="myDiv"&gt;
      &lt;div class="myDiv1"&gt;&lt;/div&gt;
      &lt;div class="myDiv2"&gt;&lt;/div&gt;
      &lt;div class="myDiv3"&gt;&lt;/div&gt;
      &lt;div class="myDiv4"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  .myDiv
  {
      float: left;
      margin-left: 10px;
      margin-top: 10px;
      width: 100px;
      height: 100px;
      background-color: grey;
  }
  
  .myDiv1
  {
      background-color: green;
      width: 10px;
      height: 10px;
      position: relative;
      top: 10px;
      left: 10px;
  }
  
  .myDiv2
  {
      background-color: red;
      width: 10px;
      height: 10px;
      position: relative;
      top: 0px;
      left: 30px;
  }
  
  .myDiv3
  {
      background-color: blue;
      width: 10px;
      height: 10px;
      position: relative;
      top: 0px;
      left: 50px;
  }
  
  .myDiv4
  {
      background-color: yellow;
      width: 10px;
      height: 10px;
      position: relative;
      top: 0px;
      left: 70px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/VLk6m/2/" rel="nofollow">http://jsfiddle.net/VLk6m/2/</a></p>