title: Hide scrollable content behind transparent fixed position divs when scrolling the page?
body: <p>I have a div called header that is set up with a fixed position. The problem is when I scroll the page the content of the page shows up behind the header (the header is transparent).</p>
  
  <p>I know a lot about css, but cannot seem to figure this one out. I have tried setting overflow to hidden, but I knew it wouldn't work (and it didn't).</p>
  
  <p>This is very hard to explain, so I did the best I could.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="header"&gt;
      &lt;div id="topmenu"&gt;Home | Find Feeds | Subscriptions&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="container"&gt;
      &lt;div id="content"&gt;
          testing
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#header {
      margin:0 auto;
      position: fixed;
      width:100%;
      z-index:1000;
  }
  #topmenu {
      background-color:#0000FF;
      height:24px;
      filter: alpha(opacity=50);
      opacity: 0.5;
  }
  
  #leftlinks {
      padding: 4px;
      padding-left: 10px;
      float: left;
  }
  
  #rightlinks {
      padding: 4px;
      padding-right: 10px;
      float: right;
  }
  
  #containerfixedtop {
      width: 100%;
      height: 20px;
  }
  
  #contentfixedtop {
      margin: 0 auto;
      background-color: #DAA520;
      width: 960px;
      height:20px;
  }
  
  #container {
      position: relative;
      top: 68px;
      width: 100%;
      height: 2000px;
      overflow: auto;
  }
  
  #content {
      margin: 0 auto;
      background-color: #DAA520;
      width: 960px;
      height: 2000px;
  }
  </code></pre>
  
  <p>Here's a screenshot of the problem:</p>
  
  <p><img src="https://i.stack.imgur.com/aEF5L.jpg" alt="enter image description here"></p>