title: sibiling div doesn't take up the space of div with position relative and with negative top
body: <pre><code>&lt;div class="wrapper"&gt;
  &lt;div class="header"&gt;
  
  &lt;/div&gt;
  &lt;div class="featured"&gt;
  </code></pre>
  
  <p>
     </p>
  
  <pre><code>&lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>The css look like this</p>
  
  <pre><code>    .header { 
      background: green;
  
      height:620px;
      }
      .footer {
      background: blue;
  
      height:200px;
      }
      .featured {
      background: yellow;
      width:500px;
      height:420px;
      margin:0 auto;
      position: relative;
      top: -200px;
      }
  </code></pre>
  
  <p>while pushing a negative top, the silbing div "footer" will not move up accordingly. That's a large empty space in between two divs</p>
  
  <p>This is my code
  <a href="http://codepen.io/adrianmak/pen/qZRqwy" rel="nofollow">http://codepen.io/adrianmak/pen/qZRqwy</a></p>