title: Transparent Header overflown by main div
body: <p>I have been looking for an answer to this question all over the interwebs, but I just can't find the answer.. I have a transparent header filled with a background image that is the same as my background, and I want my main div to scroll underneath it so the text is hidden. Here is the HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="wrapper"&gt;
      &lt;div class="top"&gt;
      &lt;!-- This is my header --&gt;
      &lt;/div&gt;
      &lt;div class="main"&gt;
      [.....]
      &lt;/div&gt;
  </code></pre>
  
  <p>And here is the CSS:</p>
  
  <pre><code>.top {
      background-image:url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
      margin-top:0px;
      height:100px;
      width:1000px;
      margin-left:auto;
      margin-right:auto;
      vertical-align:central;
      padding-left:0px;
      padding-right:opx;
  }
  
  .main {
      position:absolute;
      top:100px;
      bottom:20px;
      left:0;
      right:0;
      width:990px;
      margin:0 auto;
      padding-top:10px;
      padding-left:5px;
      padding-right:5px;
      z-index:-1;
  }
  </code></pre>
  
  <p>I have made a jsFiddle which can be found here: <a href="http://jsfiddle.net/qcaJJ/" rel="nofollow">http://jsfiddle.net/qcaJJ/</a>. Can you please help me out on how to get this working? Thanks in advance!</p>
  
  <p><b>ps.</b> Please don't mind the footer, I've used the footer from another page of mine, I don't want this one on this page :p</p>
  
  <p><b>pps.</b> If anyone knows a way to let the nav stay on it's place and the main2 div scroll, you're my hero! Kinda new to HTML and CSS..</p>