title: Preventing relatively positioned div from pushing down content
body: <p>How can I prevent relatively positioned div from pushing down content that follows? In following example I am trying to display a small green div on top of a bigger red one but the next red div gets pushed down when the green div appears. </p>
  
  <p>If there is a better way of doing this, I'd appreciate tips.</p>
  
  <p>Here is a running example: <a href="http://jsfiddle.net/38Rqh/" rel="noreferrer">http://jsfiddle.net/38Rqh/</a></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css" media="screen"&gt;
  
  .top {
    display: none;
    background-color: green;
    width: 100px;
    position: relative;
    top: -50px;
  }
  
  .bottom {
    width: 200px;
    height: 200px;
    background-color: red;
    border: 1px solid black;
  }
  
  .bottom:hover + div {
      display: block;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="bottom"&gt;
  
  &lt;/div&gt;
  &lt;div class="top"&gt;Displaying data&lt;/div&gt;
  
  &lt;div class="bottom"&gt;
  
  &lt;/div&gt;
  &lt;div class="top"&gt;Displaying data&lt;/div&gt;
  
  &lt;div class="bottom"&gt;
  
  &lt;/div&gt;
  &lt;div class="top"&gt;Displaying data&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>