title: Fixed Header Overlaying Scrollbar
body: <p>I have a fixed header implemented in my CSS but for some reason, it's overlaying the browser's scroll bar. I'm not sure why it's doing this but it seems like everything else I change doesn't help. Any idea?</p>
  
  <p><img src="https://i.stack.imgur.com/Z2Cp0.jpg" alt="Scrollbar is covered by the fixed header"></p>
  
  <ul>
  <li><strong><a href="http://jsfiddle.net/HjBhW/" rel="nofollow noreferrer">http://jsfiddle.net/HjBhW/</a></strong></li>
  </ul>
  
  <p><strong>HTML:</strong> </p>
  
  <blockquote>
  <pre><code>&lt;header class="clearfix"&gt;
    test
  &lt;/header&gt;
  
  &lt;div id="wrapper"&gt;
    &lt;div id="content"&gt;
        Content
    &lt;/div&gt;&lt;!-- end #content --&gt; 
  &lt;/div&gt;&lt;!-- end #wrapper --&gt;
  
  &lt;div id="footer"&gt;
            &lt;center&gt;footer&lt;/center&gt;
  &lt;/div&gt;
  </code></pre>
  </blockquote>
  
  <p><strong>CSS:</strong> </p>
  
  <blockquote>
  <pre><code>&lt;style type="text/css"&gt;
  * {
    margin:0;               
    padding:0;              
  }
  html, body {
    height:100%;            
  
    overflow:auto;      
    background:#2f3742;
    color: #B8C2CB;
  }
  #wrapper {
    min-height:100%;    
    width:600px;        
    margin: -30px auto;     
    background:#47535e;
    border: 1px solid #3D4857;
    border-bottom: 0;
  
  }
  * html #wrapper { 
    height:100%;        
  }
  #content {
    margin-top: 100px;
    padding: 5px;
  }
  header {
    height: 70px;
    padding: 22px 25px;
    background: #18232f;
    text-align: center; 
    position: absolute !important;
    width: 100%;
    z-index: 1;
    top:0;
    left:0; 
  }
  #footer {
    height:30px;
    width:600px; 
    margin: 25px auto 0;
    background:#2F3742;
    border: 1px solid #3D4857;
    border-top: 1px solid #2F3A4A;
  }
  &lt;/style&gt;
  </code></pre>
  </blockquote>