css - 重叠的 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-indexes 但仍然无法正常工作。有什么我忘记的或者我可以尝试解决的问题吗？

谢谢

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*/
}