title: div with position absolute doesn't overlap div with position relative
body: <p>HTML:</p>
  
  <pre><code>&lt;div class="absolute"&gt;
  &lt;/div&gt;
  &lt;div class="relative"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
  }
  html, body {
      height: 100%;
      width: 100%;
  }
  .relative {
      position: relative;
      background-color: #eee;
      height: 200px;
      width: 100%;
  }
  .absolute {
      background-color: #000;
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100%;
  }
  </code></pre>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/Lv96zy10/" rel="nofollow noreferrer">http://jsfiddle.net/Lv96zy10/</a></p>
  
  <p>How to do div with position over div using position relative?</p>
  
  <p>Thanks in advance.</p>