2013-03-21 44 views
0

我有一個滾動效果的問題,我不能讓鏈接在標題內工作,因爲z-index必須是負效應的工作。鏈接在標題中。鏈接和Z索引

編輯對不起我不是很清楚,在頭部區域中的鏈接(綠色),因爲z-index的性質,給出頭區域它使鏈接不活躍,所以我在想,一個負指數不活躍判明

http://jsfiddle.net/ThAv5/4/

HTML:

<body> 
<div id="container"> 
    <div id="navBar"></div> 
    <div id="headerBar"></div> 
    <div id="mainContent"><h1>This is the main content</h1></div> 
</div> 
</body> 

而CSS:

#navBar{ 
    position:fixed; 
    top: 0; 
    left:0; 
    width: 100%; 
    z-index:1000; 
    -moz-box-shadow: 0 0 5px #000000; 
    -webkit-box-shadow: 0 0 5px #000000; 
    box-shadow: 0 0 5px #000000; 
    background:red; 
    height:50px; 
} 

#headerBar{ 
    top: 0; 
    height: 250px; 
    left: 0; 
    right: 0; 
    margin:0px auto; 
    width:100%; 
    position: fixed; 
    z-index:-1000; 
    background:green; 
} 

#mainContent{ 
    overflow: auto; 
    z-index: 0; 
    margin-top: 250px; 
    width:100%; 
    height:900px; 
} 

body, #container{ 
    background:yellow; 
} 

回答

1

其實#navBar與#headerBar重疊,所以#headerBar內容不可見。它應該在#navBar下方,其高度爲50px。所以設置頂偏#headerBar至50像素

#headerBar { 
top:50px; 
} 

Fiddle

2

由於在您所提供的,我假設的聯繫是在「headerBar」分區代碼沒有鏈接。如果是這種情況,您無法點擊它們,因爲它們會出現在「navBar」div下,因爲您提供的樣式。

如果這是你想要的效果,那麼爲「headerBar」div指定一個邊距或填充,這將允許你推動「navBar」下面的鏈接。

+0

對不起,我不清楚頭標區域中的鏈接,而不是頂部的導航區域,因爲z-index屬性給頭區域一個負索引它不活躍,所以我想知道一個修復它 – 2013-03-21 14:06:01