title: absolute positioned child overlaps parent scroll bar
body: <p>I have a parent div with two child div(header and body), I want to set header position fixed on top and only body should scroll.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="box"&gt;
  &lt;div class="header"&gt;Header&lt;/div&gt;
  &lt;div class="body"&gt;Body&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>.box {
  height: 300px;
  border: 1px solid #333;
  overflow: auto;
  }
  .header {
  position: absolute;
  width: 100%;
  height: 100px;
  background: #ccc;
  }
  .body {
  height: 300px;
  background: #999;
  margin-top: 101px;
  }
  </code></pre>
  
  <p>I found the header div overlaps parent div's scroll bar. I can't set parent div position as relative because I want header position fixed. I can't set header position as 'fixed' because this content avilable somewhere middle of the page.</p>
  
  <p>How can I avoid absolute positioned child not overlaps parent's scroll bar?</p>
  
  <p>Find jsfiddle: <a href="http://jsfiddle.net/T43eV/1/" rel="noreferrer">http://jsfiddle.net/T43eV/1/</a></p>