title: Multiple Top-Fixed Divs?
body: <p>I have two divs:
  -A header bar, which is fixed while scrolling, and stuck at the top of the page.
  -A notification div, which contains a message banner that will slide down if triggered.</p>
  
  <p>The header bar is fixed to the top fine, but I can't seem to get the notification div to fix itself just under it. Every time I try this, this div fixes to the top of the page in-front of my header bar; seemingly replacing it. Padding doesn't seem to help.</p>
  
  <p>Can anybody offer me any suggestions, please?</p>
  
  <p>Here is the working div:</p>
  
  <pre><code>#header {
      text-align: left;
      background-image:url(../Resources/Banner2.gif);
      background-repeat:no-repeat;
      background-color:#00ed32;
      color:#FFF;
      position:fixed;
      width:100%;
      top:0px;
      left:0px;
      padding:15px;
  }
  </code></pre>
  
  <p>Here is the div I would like to fix under it:</p>
  
  <pre><code>.notify {
      background: url(../resources/gradients.png) 
      repeat-x 0px 0px; 
      top: -40px; 
      left: 0px;  
      position:fixed; 
      z-index: 100; 
      width: 100%; 
      overflow: hidden;
  }
  </code></pre>