겹치는 div 만들기 링크를 unclickable

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이 링크 unclickable 만들기 (설계 상)의 내용을 오버 플로우 및 탐색 DIV 겹치는 배경 이미지를 가지고 있습니다 :

나는 다음과 같은 레이아웃을 가지고있다. 각 요소에 적절한 z- 인덱스를 설정하려고했지만 여전히 작동하지 않습니다. 잊어 버린 것이나 이것을 고칠 수있는 것이 있습니까?

감사합니다.

Answer 1

z- 색인이 작동해야하지만 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*/ 
} 

Answer 2

CSS를 보는 것이 좋을 것입니다.

z- 색인을 어떤 요소에 설정 했습니까?

나는 #header { z-index: 10}과 #nav { z-index: 20} 을 시도했지만 잘못되었을 수 있습니다. 물론 #nav를 배치해야합니다.