title: Vertically stacked fixed top html elements
body: <p>I'm using the <a href="http://twitter.github.io/bootstrap/examples/fluid.html" rel="nofollow">twitter bootstrap fluid</a> css to build a cms(Dotnetnuke) skin. The cms displays a control panel which is fixed to the top of the page when an admin is logged in.
  This is how it looks like</p>
  
  <pre><code>&lt;div id="dnnCPWrap"&gt; ... &lt;/div&gt;
  
  #dnnCPWrap {
      width: 100%;
      position: fixed;
      left: 0px;
      top: 0px;
      z-index: 1001 !important;
  }
  </code></pre>
  
  <p>The bootstrap fluid's menu looks like this</p>
  
  <pre><code>&lt;div class="navbar-fixed-top"&gt; ... &lt;/div&gt;
  
  .navbar-fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    margin-bottom: 0;
  }
  </code></pre>
  
  <p>As you can see, they both are fixed to the top of the window and since the fluid menu has a higher z-index, it covers the cms's control panel. Question is, is it possible to have them stack on top of each other with the control panel stacked on top?</p>
  
  <p><strong>Note:</strong>The cms's control panel is only displayed when an admin is logged in so users don't see it. Thanks</p>