灰色的CSS Superfish菜單

我寫了一個腳本，當在網頁上點擊某些按鈕時，整個頁面變灰，直到用戶點擊「是」或「否」。這似乎很簡單，但我遇到了與我從Superfish使用的菜單衝突。當頁面的其餘部分變灰時，仍然可以訪問菜單。灰色的CSS Superfish菜單

我troubleshot下來的事實快魚CSS腳本中使用了一系列的

Position: relative

或

Position: absolute

所以我想，我要麼需要弄清楚爲什麼我的灰色覆蓋框不工作或硬編碼我的導航欄的位置到源中。我擔心的是，如果我這樣做了，那麼這個設置不會只是我的決議嗎？

有沒有什麼，我錯過了我的灰色框編碼，會使這發生？

#cover { 
      display:none; 
      position:absolute; 
      left:0px; 
      top:0px; 
      width:100%; 
      height:100%; 
      background:gray; 
      filter:alpha(Opacity=50); 
      opacity:0.5; 
      -moz-opacity:0.5; 
      -khtml-opacity:0.5 
}

我對css沒有多少經驗。我昨天找了幾個小時尋找解決方案，但找不到與我遇到的問題相關的任何問題。

謝謝。

來源

2012-08-09 pr-

我遇到了試圖使用下面的設置的問題。

#cover { 
     display:none; 
     position:absolute; 
     left:0px; 
     top:0px; 
     width:100%; 
     height:100%; 
     background:gray; 
     filter:alpha(Opacity=50); 
     opacity:0.5; 
     -moz-opacity:0.5; 
     -khtml-opacity:0.5 
     z-index:100 
}

我發現z-index必須在位置聲明後立即設置，否則根本不會工作。

#cover { 
     display:none; 
     position:absolute; 
     z-index:100 
     left:0px; 
     top:0px; 
     width:100%; 
     height:100%; 
     background:gray; 
     filter:alpha(Opacity=50); 
     opacity:0.5; 
     -moz-opacity:0.5; 
     -khtml-opacity:0.5 
}

來源

2012-08-15 15:58:13

這很奇怪。除非有兩個相同的規則，否則我從來沒有聽說過同一個選擇器塊中的CSS規則的位置是重要的。在這種情況下，後者顯然會取代前者。我不得不相信，雖然這可以解決這個問題，但還有其他的東西是真正導致它的。是否有可能通過一個真正簡單的jsFiddle來顯示這個'錯誤'的行動和你的解決方案如何修復它？我很樂意和它一起玩。我的第一個猜測是'filter'正在做一些事情。你試過在'filter'之前和之後移動'z-index'嗎？ – jmbertucci 2012-08-15 16:30:43

@jmbertucci我遇到的問題很難複製。正確變灰的區域都是html項目。沒有變灰的部分是帶有懸停選項的花式java菜單。當我將菜單剝離到底部時，覆蓋層工作。如果我添加了幾乎所有功能，它們都不會再工作。我將Z索引移到了任何地方，只是在屬性列表的最後纔出現問題。我用我的程序的核心創建了一個快速小提琴。出於某種原因，該程序將無法工作。 http://jsfiddle.net/qJhDS/1/ – 2012-08-15 17:22:18

感謝小提琴！我會去玩它。我熟悉Suckfish教程，這也是爲什麼我對這個奇怪的錯誤感到困惑。這是否也發生在所有瀏覽器？ – jmbertucci 2012-08-15 18:29:43

您需要設置菜單塊z-index，然後覆蓋塊z-index。

.someClass 
{ 
    position: relative; 
    z-index: 2; 
}

來源

2012-08-09 15:05:13

我必須缺少一些東西。我分配了我的#cover {z-index：200}併爲其餘的類分配了{z-index：2}的值，而且我仍然遇到同樣的問題。 – 2012-08-09 15:11:42

灰色的CSS Superfish菜單

回答

相關問題