Перекрытие div делает ссылки не кликабельными

Question

Я создаю тему shopify, используя сетку 960.

У меня есть следующий макет:

 <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 должны располагаться нестатичным способом. 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 нужно позиционировать.