滚动时防止内容 div 与标题 div 重叠答案

【问题标题】：prevent content div from overlapping header div when scrolling滚动时防止内容 div 与标题 div 重叠
【发布时间】：2023-04-03 17:40:01
【问题描述】：

嗨，我有两个 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;
    }

我希望窗口滚动条只滚动正文内容。我想避免更改 body 标记的 css，因为我的部分是整个页面的子部分。
我不希望“内容”div 覆盖/重叠“标题”div。（标题应保持固定并始终显示在顶部。用户应该能够滚动正文的内容而不会覆盖/重叠标题。

【问题讨论】：

标签： html css scrollbar overlay overlapping

【解决方案1】：

您的问题有点令人困惑，但我从中得到的是您需要滚动页面的一部分并使其部分不滚动？使用 position:fixed 而不是 position:absolute 应该让你的 div 说“这里有一些随机的 html 内容”会阻止它向下滚动。要使标题与正文重叠，请将其值设为background-color:white。我做了一个工作示例here

【讨论】：

是的，我希望标题保持固定，滚动条只滚动内容。我可以让标题保持固定，但是当我这样做时，正文的内容会重叠/覆盖标题，我不希望那样。
结合 background-color:white 和 z-index 在 10 的位置解决了这个问题并给了我想要的东西

【解决方案2】：

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

【讨论】：