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;
    }

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

Answer 1

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

Answer 2

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

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

2 个答案: