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/>