灰色的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菜单

回答

相关问题