css - SuperFish 菜单的 CSS Z-index 声明

Question

我在维护的网站上遇到 z-indexing 问题。它似乎是由 SuperFish 菜单和 div 中的 z 索引引起的。但是，无论我将 position:relative/absolute & z-index: 99999 声明放在哪里，菜单仍然卡在右侧第三个面板后面。

要查看此问题，您需要将鼠标悬停在实践领域，然后是房地产。您会注意到子菜单卡在面板后面。

试图弄清楚这一点让我发疯了。

该网站是：http://174.120.240.5/~rushmars/

Answer 1

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

• 身体 -position: relative
  • ＃主要的
    • 标题 -position: relative; z-index: 99
    • .primary_content_tail -position: relative; z-index: 9300
  • 页脚

正如MDN所说

堆叠上下文由文档中的任何位置 [...] 以“auto”以外的 z-index 值定位（绝对或相对）的任何元素形成

所以我们有两个堆叠上下文，所以标题中的菜单总是在内容的后面。尝试将 z-indeces 设置为自动（内联）。现在我们有

• 身体 -position: relative
  • ＃主要的
    • 标题 -position: relative; z-index: auto
    • .primary_content_tail -position: relative; z-index: auto
  • 页脚

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