Überlappendes div macht Links unclickable

Question

Ich baue ein shopify Thema mit 960 Grid-System.

Ich habe folgendes 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> 

Das Problem ist die div tl_overlay ein Hintergrundbild hat, die ihren Inhalt (von Design) überläuft und überlappt die Navigation div, die Links unclickable machen. Ich habe versucht, passende Z-Indizes für jedes Element zu setzen, aber immer noch nicht zum Laufen zu bringen. Gibt es etwas, das ich vergessen habe oder irgendetwas, das ich versuchen kann, dies zu beheben?

Danke

Answer 1

Z-Index muss funktionieren, aber die nav und header div sollten auf eine nicht statische Weise positioniert werden. position: relative sollte den Trick tun, ohne Ihr Design zu brechen. so sollten Sie sicherstellen, dass Sie folgende in Ihrem css haben:

#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

Es wäre schön, das CSS zu sehen.

Auf welche Elemente haben Sie den Z-Index gesetzt?

Ich hätte versucht, die #header { z-index: 10} und #nav { z-index: 20} aber könnte falsch sein. Natürlich muss #nav positioniert werden.