divをリンクして重複しないようにする

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-indexを設定しようとしましたが、まだそれを動作させることはできません。私が忘れてしまったことや、これを解決しようとすることができるものはありますか？

ありがとうございました

Answer 1

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

Answer 2

このCSSを見てうれしいです。

z-indexをどの要素で設定しましたか？

私は#header { z-index: 10}と#nav { z-index: 20} を試してみましたが間違っている可能性があります。もちろん#navを配置する必要があります。