重叠div使链接不可点击

Question

我正在使用960网格系统构建shopify主题。

我有以下布局：

 <div id="header" class="container_16"> <!-- relatively positioned -->
      <div id="tl_overlay"></div> <!-- absolutely positioned top:0 left:0 -->
                     .
                     .
                     .
 </div>
 <div id="nav" class="container_16"> 
    <ul id="navlist" class="grid_16 push_1">
       {% for link in linklists.main-menu.links %}
          <li><a href="{{ link.url }}">{{ link.title }}</a></li>
       {% endfor %}
    </ul>
 </div>

问题是div tl_overlay的背景图像溢出（通过设计）其内容（通过设计）并与导航div重叠，从而使链接不可单击。 我尝试在每个元素上设置适当的z索引，但仍然无法使其正常工作。 有什么我忘记的事情或者什么我可以尝试解决的！

谢谢

Answer 1

z-index必须有效，但是nav和header div应该以非静态方式放置。 position: relative应该在不破坏设计的前提下做到这一点。 因此，您应该确保CSS中包含以下内容：

#header{
  z-index: 5;
  postion:relative;/*or any other position except for static, depending on your design*/
}
#nav{
  z-index:6;
  postion:relative;/*or any other position except for static, depending on your design*/
}

Answer 2

很高兴看到CSS。

您在哪些元素上设置了z-index？

我会尝试在#header { z-index: 10}和#nav { z-index: 20}上尝试，但可能是错误的。 当然#nav需要定位。