title: Bootstrap 3 div over jumbotron
body: <p>I am using Bootstrap 3, and have a problem getting a div to sit over a jumbotron header.
  I am using the jumbotron class to give me a full width, responsive header with a background image as below...</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  &lt;div class="jumbotron"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
          &lt;div class="col-md-8"&gt;text here&lt;/div&gt;
          &lt;div class="col-md-4"&gt;text here&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is the rest of the site...</p>
  
  <pre><code> &lt;div class="container"&gt;rest of site goes here
   &lt;/div&gt;
  </code></pre>
  
  <p>What I want to do is have my entire site/container BELOW the jumbotron - slide up and cover half of it's height. Obviously as is, the container for the site content is cleared below the jumbotron, but i need a solution to get it up about 100px to cover the lower half of jumbotron.</p>
  
  <p>I have tried both z-index methods and absolute positioning but can't get either to work. Any suggestions?</p>
  
  <p>A SAMPLE TO WORK WITH HERE - <a href="http://jsfiddle.net/9b9Da/7/" rel="nofollow">http://jsfiddle.net/9b9Da/7/</a></p>