css - 绝对定位的 child 重叠父滚动条

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 位置设置为相对位置，因为我希望标题位置固定。我无法将页眉位置设置为“固定”，因为该内容位于页面中间的某个位置。

如何避免绝对定位的 child 不与 parent 的滚动条重叠？

找到 jsfiddle:http://jsfiddle.net/T43eV/1/

Answer 1

应该在 .body 上设置 overflow 属性，而不是 .box，例如:http://jsfiddle.net/T43eV/8/