title: Bootstrap 3 fixed navbar and fixed content "drawer"
body: <p>I have created a code snippet to try and demonstrate what I am trying to achieve. (I have tried to make it as simple as possible)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;title&gt;Fixed Top Navbar and "drawer" content area&lt;/title&gt;
  
      &lt;!-- Bootstrap core CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
   
      &lt;!-- Custom styles for this template --&gt;
      &lt;style&gt;
    #fixed-panel-top {
     position: fixed;
     top: 0;
     right: 0;
     left: 0;
     width: 800px;
     margin-left: auto;
     margin-right: auto;
    }
    
    .custom-navbar-example {
     height: 40px;
     background-color: yellow;
     z-index: 1030;
    }
    
    .fixed-content-top {
     height: 200px;
     background-color: blue;
     z-index: 1;
    }
    
    .relative-content {
     width: 800px;
     margin-top: 300px;
     height:1000px;
     background-color: red;
     z-index: 1020;
    }
   &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;!-- Fixed navbar --&gt;
   &lt;div id="fixed-panel-top"&gt;
    &lt;!-- Navbar --&gt;
    &lt;div class="custom-navbar-example"&gt;&lt;/div&gt;
   
    &lt;!-- Top fixed content area --&gt;
    &lt;div class="fixed-content-top"&gt;
    &lt;/div&gt;                         
   
   &lt;/div&gt;
  
      &lt;div class="container relative-content"&gt;
      &lt;/div&gt; &lt;!-- /container --&gt;
  
  
      &lt;!-- Bootstrap core JavaScript
      ================================================== --&gt;
      &lt;!-- Placed at the end of the document so the pages load faster --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The yellow div represents a fixed top navbar, the blue div represents the fixed top content area below the navbar and the red div represents the "rest of the page content" which will be relative.</p>
  
  <p>The desired effect is that as you scroll down, the red div will appear over the top of the blue div, but under the yellow div. This will give the effect of the blue div being a "drawer" of content that can be hidden by the red div. I have already tried representing this using z-index but to no avail.</p>
  
  <p>Can anyone point me in the right direction or solve it?</p>
  
  <p><strong>EDIT:</strong> Clarifications</p>
  
  <p>I am wanting the yellow and blue div to be both fixed. The illusion I am trying to achieve is the red div scrolls up over the blue div. If the blue div contained an image, the image would stay static while the red div scrolled up to hide it.</p>