Scroll Main Conent OVER固定標頭

Question

我被我所希望的一個非常簡單的問題難倒了。我有一個由兩個div組成的頁面：

<div id="header">...</div> 
<div id="content">...<div> 

頁眉將固定在頁面頂部，主內容部分將正常滾動。我需要我的主內容div來滾動標題，並將其覆蓋。

我可以通過將標題固定到頂部來完成所需的外觀和感覺，給主要內容留出足夠大的空間以放置在正確的位置，並調整z索引以使主要內容滾動在頭上。問題是，當我這樣做時，主要內容部門的margin-top覆蓋頭部的所有鏈接和懸停元素，使其可見但不活動。

我真的希望這是一個簡單的修復。有人可以提出建議嗎？我試圖做到這一點，而不訴諸於JavaScript。提前感謝！

Answer 1

其實我有同樣的問題，並想出這個http://jsfiddle.net/EWefL/

<header><a href="/">Working header link</a></header> 
<section>Section</section> 

header { 
    background:#cff; 
    height:100px; 
    position:fixed; 
    right:0; 
    left:0; 
    z-index:100; 
} 

section { 
    background: #579; 
    height:600px; 
    top:100px; 
    position:relative; 
    z-index:200; 
} 

基本上都採用相對位置和頂部屬性，而不是邊距。需要注意的一件重要事情是，Z指數始終需要設置爲大於零。