滾動時防止內容div與標題div重疊

Question

嗨，我有兩個分區。

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

1. 我希望窗口滾動條僅滾動正文內容。 我想避免為body標簽更改css，因為我的部分是整個頁面的子部分。
2. 我不希望“內容” div覆蓋/覆蓋“標題” div。 （標題應保持固定，並始終顯示在頂部。用戶應能夠滾動正文的內容，而無需覆蓋/重疊標題。

Answer 1

您的問題有點令人困惑，但是我從中得到的是您需要滾動頁面的一部分並阻止頁面的一部分不滾動？ 使用position：fixed代替position：absolute可以使您的div保持“此處有一些隨機html內容”，以防止其向下滾動。 要使頁眉與主體重疊，請為其指定一個值background-color:white 。 我在這里做了一個工作的例子

Answer 2

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