Z-indexが問題を引き起こしています

Question

私はウェブサイトを作成しましたが、今は1つの問題があります。リンクやナビゲーションでもクリックできません。

実際のコードを確認するには、 http://www.cambridgekitty.com/business-directory/ をご覧ください。

HTML

<div id="main-bg"> 
    <div id="left-side-logo"></div> 
</div> 

CSS

#wrap { 
    padding: 0; 
    position: relative; 
    width: 100%; 
} 
#main-bg { 
    background: url("../img/kittybg2-h.png") no-repeat scroll right top transparent; 
    margin: 0 auto; 
    min-height: 733px; 
    position: relative; 
    width: 100%; 
    z-index: -9999; 
} 

はちょうど左側に

#left-side-logo { 
    background: url("../img/norwichkitty-final-logo-bg-02.png") no-repeat scroll 0 0 transparent; 
    height: 500px; 
    left: -150px; 
    opacity: 0.8; 
    position: absolute; 
    top: -60px; 
    width: 500px; 
    z-index: -1; 
} 

をロゴを追加して

を追加します

position: relative; 

〜＃wrap。そして追加する。

z-index: -9999; 

と＃main-bg。

この後、私はロゴやナビゲーションリンクをクリックすることができません。

なぜこの問題を抱えているのか教えてください。

はあなたがやっている内容を正確に把握していない場合は、負のz-indexを使用しないでください、あなたに

Answer 1

が、私は単純な変更要素が、私は別の背景画像を適用します。都市イメージの背景を#inner-wrapper、ロゴの背景を#main-bgとします。次にbackground-positionプロパティを使用して、ロゴの背景（現在はbackgroundルールの2つのゼロ）を配置します。また、そのロゴの不透明度が必要な場合は、Photoshopなどで設定するだけで簡単に設定できます。

このソリューションは、いくつかのコンテナを持っていますが、z-indexの問題に対処する必要がなく、より多くのハックフリーとセマンティックマークアップを実現することを意味します。これが助けて欲しいと思っています:)

Answer 2

に感謝します。正の値を使用し、#left-side-logoのz-indexをさらに高い値に設定してください。

#wrapは、z-indexという負の値を持つため、後者の積み重ねインデックスの#inner-wrapperの内容の後ろに配置されます。

も参照してください：私はあなただったら

• W3C: CSS2.1: 9 Visual formatting model (Section z-index)