重叠div制作链接不可点击 [英] Overlapping div making links unclickable

问题描述

我有以下布局：

 < div id =headerclass =container_16> <！ - 相对定位 - > 
< div id =tl_overlay>< / div> <！ - 绝对定位顶部：0左侧：0  - > 
。 
。 
。 
< / div> 
< div id =navclass =container_16> 
< ul id =navlistclass =grid_16 push_1> 
 {％为linklists.main-menu.links％中的链接} 
< li>< a href ={{link.url}}> {{link.title}}< ; / A>< /锂> 
 {％endfor％} 
< / ul> 
< / div> 
  

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

谢谢

z-index必须工作，但 nav 和标题 div应该位于非静态的方式。
position：relative 应该在不破坏设计的情况下做到这一点。
，所以你应该确保你在你的css中有以下内容：

  #header {
 z-指数：5; 
 postion：relative; / *或除静态以外的任何其他位置，具体取决于您的设计* / 
} 
 #nav {
 z-index：6; 
 postion：relative; / *或除静态以外的任何其他位置，具体取决于您的设计* / 
} 
  

I'm building a shopify theme using 960 grid system.

I have the following layout:

 <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>

The problem is the div tl_overlay has a background image which overflows its content (by design) and overlaps the navigation div, making the links unclickable. I've tried setting appropriate z-indexes on each element but still cannot get it to work. Is there anything i've forgotten or anything I can try to fix this!

Thanks

解决方案

z-index must work, but the nav and header div should be positioned in a non-static way. position: relative should do the trick without breaking your design. so you should make sure you have the following in your 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*/
}

这篇关于重叠div制作链接不可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！