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

首先，删除您在同一元素中拥有的两个z-index中的一个。

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

如果可行，请一次添加一行并进行测试。

如果无法正常工作，则表明您的网页上存在其他错误。

Answer 2

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

firefox 5中的z-index问题，chrome

2 个答案: