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

溢出属性应该在.body上设置，而不是.box，因此：http://jsfiddle.net/T43eV/8/

Answer 2

这有帮助吗？

.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 3

如果它有助于在.header中设置z-index：-1并且标题不会与滚动条重叠。

Here is the working fiddle:

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

Answer 4

一种方法是使用sticky position。这样会将标头保留在可滚动div内，但不会使其与滚动重叠（如果设置了较低的z-index，则不会与滚动重叠）

.box {
    height: 300px;
    border: 1px solid #333;
    overflow: auto;
}
.header {
    position: sticky;
    top:0;
    height: 100px;
    margin-bottom:-100px;
    background: #ccc;
}
.body {
    height: 300px;
    background: #999;
    margin-top: 101px;
}

但这是not supported by internet explorer

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

4 个答案: