滚动时防止内容 div 与 header div 重叠

Question

嗨，我有两个 div。

<div id="header">
  -- some random html content here --
</div>

<div id="content">
    1
    2
    3
    4
    5
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    some long content that needs scrolling. 
</div>

这是我的css。

#header {
        vertical-align:middle; 
        position:fixed; 
        top:0ex; 
        width:800px;
        height: 48px;
        background-color: #FFFFFF;
        z-index: 10;
    }

    #content {
        text-align:center; 
        margin-left:auto; 
        margin-right:auto; 
        width: 800px;
        margin-top: 24px;
    }

我希望 window 滚动条只滚动 body 内容。我想避免为 body 标记更改 css，因为我的部分是整个页面的子部分。
我不想"content" div overlay/overlap "header" div。（Header 应该保持固定并始终出现在顶部。用户应该能够在没有 overlaying/overlapping header 的情况下滚动 body 的内容。

Answer 1

你的问题有点令人困惑，但我从中得到的是你需要滚动页面的一部分并防止页面的一部分不滚动？使用 position:fixed 而不是 position:absolute 应该可以使 div 保持 "some random html content here" 不会向下滚动。要使 header 与 body 重叠，请为其赋值 background-color:white。我做了一个工作示例 here

Answer 2

#header {
    vertical-align:middle; 
   /* position:absolute; */position:fixed;
}
z-index:
    top:0ex; 
    width:800px;
}

滚动时防止内容 div 与 header div 重叠

prevent content div from overlapping header div when scrolling

html

css

scrollbar

overlay

overlapping