absolute positioned child overlaps parent scroll bar

Question

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/

Answer 1

The overflow property should be set on the .body, not .box, as such : http://jsfiddle.net/T43eV/8/

Answer 2

Does this help?

.box { position:relative; }

EDIT: There isn't any need to use absolute anyway, remove that and put overflow:auto on .body.

jsFiddle

.box {
    height: 300px;
    border: 1px solid #333;
}
.header {
    width: 100%;
    height: 100px;
    background: #ccc;
}
.body {
    height: 200px;
    background: #999;
    width:100%;
    overflow: auto;
}

EDIT: I don't think you can do this consistently across platforms. You could kind of do it by setting your right property on .header to be as large at the scrollbar, but the size of the scrollbar is bound to the operating system and isn't a single size.

You could look into an iframe as that will create a page within your page, scrollbar and all.

Answer 3

If it helps set z-index:-1 in .header and the header will not overlap the scroll bar.

Here is the working fiddle:

http://jsfiddle.net/T43eV/28/