2013-01-06 57 views
0

基本上用下拉菜單創建一個網頁我寫了一篇教程。我的頁面佈局由3個獨立的表格組成,其中1個用於標題/橫幅,一個用於下拉菜單,另一個用於主體/內容。CSS-z-index:-1在谷歌瀏覽器中突破

我遇到第一關的問題是,當我滾動了我的下拉菜單,它丟棄我的身體/內容桌子後面。我找到了一個解決方案,其中包括z-index:-1。這在IE中完美運行,但在Chrome中測試後,它阻止了鏈接和內聯框架在內容/主體表上的交互。

#bodytable {width:1100px; 
     height:100%; 
     margin:auto; 
     position:relative; 
     top:10px; 
     z-index:-1; 
     } 

整個的CSS代碼可以在這裏找到:

http://pastebin.com/T97JAjQ8

+0

我們需要的不僅僅是那個塊 –

回答

2

先給他們每人一個正z-index值。顯然,較高的numbes將是「上面」其他的與較小值。給人一種表「-1」 Instaed,給它一些積極的事情,像10,並在下拉菜單中的「20」。你甚至可以設置在機身的z索引,以0爲基準。

我還沒有證實這一點,但它可能是鉻不喜歡消極的z-index值。

0

賦予負值z-index使您的元素位於body或wrapper div下,因此阻止它們進行交互,因爲當您單擊發生在body標籤not事件表上的事件時,body元素位於該表頂部標籤。你必須給予正z-索引值。元素的默認堆棧順序是確定元素定義的位置。例如,您的表將有如果菜單股利後確定一個更大的z-index值。您可以通過只更改當前的堆棧順序來解決您的問題。只需將該負值改爲正值即可。

element { 
z-index:1; 
} 

上面的代碼會將目標元素設置爲位於當前堆棧順序旁邊的其他元素之上。