Overlapping div making links unclickable

Question

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

Answer 1

It would be nice to see the CSS.

On what elements did you set the z-index?

I would have tried on the #header { z-index: 10} and #nav { z-index: 20} but could be wrong. Of course #nav needs to be positioned.

Answer 2

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