2

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>

問題は、divtl_overlayに背景画像があり、そのコンテンツが（設計上）オーバーフローし、ナビゲーションdivと重なって、リンクがクリックできなくなることです。各要素に適切なz-indexを設定しようとしましたが、それでも機能しません。忘れてしまったことや、これを修正するためにできることはありますか？

ありがとう

4

2 に答える 2

5

z-indexは機能する必要がありますが、navおよびheaderdivは非静的な方法で配置する必要があります。 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*/
}
于 2010-12-15T00:14:29.010 に答える
1

CSSを見るといいでしょう。

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

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

于 2010-12-15T00:02:18.813 に答える