重叠的 div 使链接无法点击

发布于 2024-10-08 00:04:38 字数 774 浏览 8 评论 0原文

我正在使用 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 索引，但仍然无法使其工作。有什么我忘记的事情或者我可以尝试解决这个问题吗？

谢谢

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

贪恋 2024-10-15 00:04:38

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

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

回复收藏 0 原文