8

我有一个带有两个子 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/

4

4 回答 4

3

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

于 2013-03-21T21:47:47.147 回答
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;
}

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

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

于 2013-03-21T21:44:15.143 回答
1

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

Here is the working fiddle:

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

于 2016-04-12T12:49:47.397 回答
0

一种方法是使用粘性位置。这会将标题保留在可滚动的 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;
}

但是Internet Explorer 不支持此功能

于 2019-12-31T03:22:32.833 回答