Absolutely positioned child overlaps the parent scrollbar

Question

I have a parent div with two child divs (heading and body), I want to set the position of the heading fixed at the top, and only the 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 that the div title overlaps the scrollbar of the parent div. I cannot set the parent position of the div as relative, because I want the title position to be fixed. I can’t set the title position as “fixed” because this content may be somewhere in the middle of the page.

How can I avoid an absolute positioned child element that does not overlap the parent scroll bar?

Find jsfiddle: http://jsfiddle.net/T43eV/1/

Answer 1

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

Answer 2

Does it help?

 .box { position:relative; } 

EDIT: In any case, there is no need to use absolute , delete it 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 do not think you can do this sequentially on different platforms. You could do this by setting the .header property for the right property as large as possible on the scroll bar, but the size of the scroll bar is tied to the operating system and is not the only size.

You can look at the iframe , as this will create a page on your page, scroll bar and all.

Answer 3

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

 Here is the working fiddle: 

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