绝对定位的孩子重叠父滚动条

Question

我有一个父div与两个子div（标题和正文），我想设置标题位置固定在顶部，只有身体应滚动。

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; 
} 

我发现头的div重叠父div的滚动条。我不能将父母div位置设置为相对的，因为我需要修正标头位置。我无法将标题位置设置为“固定”，因为此内容可以在页面的某个中间位置显示。

如何避免绝对定位的孩子不重叠父母的滚动条？

查找的jsfiddle：http://jsfiddle.net/T43eV/1/

Answer 1

这是否帮助？

.box { position:relative; } 

编辑：没有任何需要使用absolute反正，删除，并把overflow:auto上.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; 
} 

编辑：我不认为你可以跨平台始终做到这一点。您可以通过将.header上的right属性设置为在滚动条上的大小来实现，但滚动条的大小绑定到操作系统并且不是单一大小。

您可以查看iframe，因为这将在您的页面，滚动条和所有内容中创建页面。

Answer 2

overflow属性应在.body，不.box被设置，因为这样的：http://jsfiddle.net/T43eV/8/

Answer 3

如果有帮助设置的z-index：-1 .header和报头将不会重叠的滚动条。

Here is the working fiddle: 

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