绝对定位的子元素重叠了父元素滚动条

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的位置设置为relative，因为我想要头部的位置固定。我也不能将头部的位置设置为“fixed”，因为这个内容在页面中间某处可用。

如何避免绝对定位的子元素重叠父元素的滚动条？

在jsfiddle上查找：http://jsfiddle.net/T43eV/1/

- Murali

---

为什么你不能使用header position:fixed？ - Manish Mishra

position: fixed 也会产生类似 position: absolute 的效果。 - Murali

Answer 1

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

- darma

---

我希望包含内容的滚动条和页面主体滚动时，可以在页眉后面滚动。 - Murali

你是什么意思？框包含标题，因此如果您向后滚动到标题“后面”，那么它会回到原始状态。 - darma

我期望的是标题不应该与滚动条重叠，就像如果我设置.box { position: relative; }一样。但是我希望标题始终可见在顶部，并且在我滚动box时不应该随着它一起滚动。 - Murali

Answer 2

如果在 .header 中设置 z-index:-1，它将不会覆盖滚动条。

Here is the working fiddle:

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

- Ravikiran Bhat

Answer 3

这有帮助吗？

.box { position:relative; }

编辑：其实没有必要使用absolute，可以将其删除并在.body上添加overflow:auto。

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，因为它会在你的页面内创建一个包含滚动条的页面。

- Daniel Imms

---

我无法设置.box { position: relative; }，因为这会导致页眉也滚动。我希望达到类似的效果，但是页眉不应该滚动。 - Murali

我想要一个滚动条的框，标题应该始终可见在顶部，当我滚动框时只有主体内容应该滚动。 - Murali

Answer 4

一种实现的方法是使用粘性定位。这将使页眉保持在可滚动的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中不受支持

- Jordan Daigle