滾動時阻止內容div與重疊標題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; 
    } 

1. 我想窗口滾動條滾動僅主體內容。我想避免更改身體標記的CSS，因爲我的部分是整個頁面的子部分。
2. 我不希望「內容」div覆蓋/重疊「標題」div。 （頭部應該保持固定並始終出現在頂部用戶應該能夠滾動身體的內容而不會覆蓋/重疊頭部

Answer 1

你的問題有點令人困惑，但是我從中得到的是你需要的滾動頁面的一部分，並保持它的一部分不滾動？使用位置：固定，而不是位置：絕對應該讓你的div「這裏有一些隨機的HTML內容」，它會阻止它滾動下來。身體，給它的background-color:white值。我做了一個工作示例here

Answer 2

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