title: fixed page, content scrolling behind header
body: <p>I am working on a website.  I have most of the page fixed, except I want the table in the middle to scroll with the main scrollbar.  Then I have an image in the background that I want to partially show through.  I have it mostly working.  The only part I cannot figure out is how to get the table content to go behind or even stop when it gets to the header.  I will include a fiddle so you can see what I am talking about.
  HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="background"&gt;&lt;/div&gt;
  &lt;div id="tableBackground"&gt;&lt;/div&gt;
      &lt;div id="fixedHeader"&gt;
          &lt;h1&gt;fixed header&lt;/h1&gt;
          &lt;h2&gt;Subheading&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div id="tableContainer"&gt;
          &lt;table class="stocks compact display cell-border"&gt;
              &lt;tr&gt;&lt;td&gt;row 1 cell 1&lt;/td&gt;&lt;td&gt;row 1 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 2 cell 1&lt;/td&gt;&lt;td&gt;row 2 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 3 cell 1&lt;/td&gt;&lt;td&gt;row 3 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 4 cell 1&lt;/td&gt;&lt;td&gt;row 4 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 5 cell 1&lt;/td&gt;&lt;td&gt;row 5 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 6 cell 1&lt;/td&gt;&lt;td&gt;row 6 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 7 cell 1&lt;/td&gt;&lt;td&gt;row 7 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 8 cell 1&lt;/td&gt;&lt;td&gt;row 8 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 9 cell 1&lt;/td&gt;&lt;td&gt;row 9 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 10 cell 1&lt;/td&gt;&lt;td&gt;row 10 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 11 cell 1&lt;/td&gt;&lt;td&gt;row 11 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 12 cell 1&lt;/td&gt;&lt;td&gt;row 12 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 13 cell 1&lt;/td&gt;&lt;td&gt;row 13 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 14 cell 1&lt;/td&gt;&lt;td&gt;row 14 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 15 cell 1&lt;/td&gt;&lt;td&gt;row 15 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 16 cell 1&lt;/td&gt;&lt;td&gt;row 16 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 17 cell 1&lt;/td&gt;&lt;td&gt;row 17 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 18 cell 1&lt;/td&gt;&lt;td&gt;row 18 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 19 cell 1&lt;/td&gt;&lt;td&gt;row 19 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 20 cell 1&lt;/td&gt;&lt;td&gt;row 20 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 21 cell 1&lt;/td&gt;&lt;td&gt;row 21 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 22 cell 1&lt;/td&gt;&lt;td&gt;row 22 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 23 cell 1&lt;/td&gt;&lt;td&gt;row 23 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 24 cell 1&lt;/td&gt;&lt;td&gt;row 24 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 25 cell 1&lt;/td&gt;&lt;td&gt;row 25 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 26 cell 1&lt;/td&gt;&lt;td&gt;row 26 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 27 cell 1&lt;/td&gt;&lt;td&gt;row 27 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 28 cell 1&lt;/td&gt;&lt;td&gt;row 28 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 29 cell 1&lt;/td&gt;&lt;td&gt;row 29 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 30 cell 1&lt;/td&gt;&lt;td&gt;row 30 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 31 cell 1&lt;/td&gt;&lt;td&gt;row 31 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 32 cell 1&lt;/td&gt;&lt;td&gt;row 32 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 33 cell 1&lt;/td&gt;&lt;td&gt;row 33 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 34 cell 1&lt;/td&gt;&lt;td&gt;row 34 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 35 cell 1&lt;/td&gt;&lt;td&gt;row 35 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 36 cell 1&lt;/td&gt;&lt;td&gt;row 36 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 37 cell 1&lt;/td&gt;&lt;td&gt;row 37 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 38 cell 1&lt;/td&gt;&lt;td&gt;row 38 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 39 cell 1&lt;/td&gt;&lt;td&gt;row 39 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 40 cell 1&lt;/td&gt;&lt;td&gt;row 40 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 41 cell 1&lt;/td&gt;&lt;td&gt;row 41 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 42 cell 1&lt;/td&gt;&lt;td&gt;row 42 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 43 cell 1&lt;/td&gt;&lt;td&gt;row 43 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 44 cell 1&lt;/td&gt;&lt;td&gt;row 44 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 45 cell 1&lt;/td&gt;&lt;td&gt;row 45 cell 2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;row 46 cell 1&lt;/td&gt;&lt;td&gt;row 46 cell 2&lt;/td&gt;&lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    html { 
      background: url(http://oi65.tinypic.com/29dhf6g.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
  }
  
  html,body{
    margin: 0;
    padding: 0;
  }
  
  #background {
      position: fixed;
      top: 0;
      left: 0;
      z-index: -10;
      width: 100%;
      height: 100%;
  }
  
  #tableBackground {
      position: fixed;
      width: 90%;
      height: 100%;
      max-width: 1200px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.8);
      left: 0;
      right: 0;
      z-index: 0;
  }
  
  #fixedHeader {
      position: fixed;
      left: 50%;
      top: 0;
      margin-left:-600px;
      width: 1200px;
      height: 80px;
      z-index: 10;
  }
  
  #tableContainer {
      position: relative;
      top: 80px;
      width: 1200px;
      margin: 0 auto;
  }
  
  .stocks {
      margin: 20px auto;
  }
  
  h1 {
      font-size: 1.4em;
      text-align: center;
  }
  
  h2 {
      font-size: 1.2em;
      text-align: center;
  }
  </code></pre>
  
  <p>And here is my <a href="http://jsfiddle.net/Lmwuz4gf/" rel="noreferrer">fiddle</a> so you can see what exactly I am describing.  You can see the table content shows behind the header when it scrolls up.  I want it to hide when it gets to the header.</p>