SuperFish菜单的CSS Z-index声明

时间:2013-08-08 19:16:19

标签: css wordpress z-index superfish

我在维护的网站上遇到z-indexing问题。它似乎是由SuperFish菜单中的z-indexing和div引起的。但是,无论我把位置放在哪里:相对/绝对& z-index:99999声明,菜单仍然卡在右边的第三个面板后面。

要查看此问题,您需要将鼠标悬停在“实践区域”和“房地产”上。您会注意到子菜单卡在面板后面。

这让我疯狂地试图解决这个问题。

网站为:http://174.120.240.5/~rushmars/

1 个答案:

答案 0 :(得分:0)

您有太多定位元素。让我们看一下树上的整个事情。

  • 正文 - position: relative
    • #main
      • 标题 - position: relative; z-index: 99
      • .primary_content_tail - position: relative; z-index: 9300
    • 页脚

正如MDN所说

  

堆叠上下文在文档中的任何位置由任何(绝对或相对)定位的元素形成,其中z-index值不是“auto”

因此我们有两个堆叠上下文,因此标题中的菜单将始终位于内容之后。尝试将z-indeces设置为auto(内联)。现在我们有了

  • 正文 - position: relative
    • #main
      • 标题 - position: relative; z-index: auto
      • .primary_content_tail - position: relative; z-index: auto
    • 页脚

它在Chrome Canary和Firefox Aurora中按预期工作。如果您需要初始z-indeces,则可能需要为菜单创建一个新图层(堆叠上下文)。