absolute positioned child overlaps parent scroll bar

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. HTML ``` <div class="box"> <div class="header">Header</div> <div class="body">Body</div> ``` CSS ``` .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; } ``` 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. How can I avoid absolute positioned child not overlaps parent's scroll bar? Find jsfiddle: http://jsfiddle.net/T43eV/1/