Firefox 5、Chrome 中的 z 索引问题

Question

我正在为 IE6 和 7 进行 CSS 修复，并且遇到了一些 z-index 问题。没什么大不了的，我只是一次浏览一遍。在尝试修复它们的过程中，我发现了 Firefox 和 Chrome 中更大的 z-index 问题。我在标题中有一个链接，单击该链接会触发下拉菜单向下滑动。问题是它落在标题下方的导航区域后面。

这是下拉菜单和导航的 css：

#topNav{
    width:100%;
    height:50px;
    line-height:50px;
    z-index:1;
    position:relative;
}

#minicart{
    position:relative;
    width:355px;
    height:auto;
    z-index:1000;
    background-color:#fff;
    top:0px;
    right:0px;
    float:right;
    -moz-border-radius:3px;
    border-radius:3px;
    border:1px solid #000;
    -moz-box-shadow:0 0 10px 0 #666;
    -webkit-box-shadow:0 0 10px 0 #666;
    box-shadow:0 0 10px 0 #666;
    behavior:url(http://192.168.1.104/magento/skin/frontend/asi/default/assets/PIE.htc);
    color:#000; 
    z-index:9999;
}

因此您可以看到 #minicart z-index 远高于 #topNav。我不明白为什么即使 z-index 较小，#topNav 仍然位于顶部。

有什么建议吗？

Answer 1

很有可能，您的 #minicart 有一个祖先，它形成了一个新的堆叠上下文（例如，具有非自动 z 索引或应用了 CSS 变换或不透明度不等于 1）并且是 z-在#topNav下方订购。在没有看到实际页面的情况下很难说更多。

Answer 2

首先，删除同一元素上的两个 z-index 之一。

然后以艰苦的工作方式进行一些故障排除。删除（注释掉）所有代码行，只保留 z-index 以及一些使它们可视化的方法，例如 background-color。

如果这有效，请一次添加一行并进行测试。

如果它不起作用，则您的页面上还有其他问题。