2012-04-15 29 views
0

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

実際のコードを確認するには、 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を使用しないでください、あなたに

答えて

0

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

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

+0

はい、私は今理解しています、あなたの方法は本当に私と一緒に働いています。しかし、この方法で私はロゴの上部と左側をPhotoshopでカットする必要があります。なぜなら、もし私がロゴにトップポジションとレフトポジションを加えるならば。それは完全なウェブサイトにインパメントするでしょう。 –

+0

ロゴの背景画像をサイトの別のページで異なる位置に置く必要がある場合は、 'business-to-business 'というクラスについて議論しているページに' 'ディレクトリ '(URLのため)。このクラスでは、ロゴの位置を変更することができます。このページでは、次のようなCSSを使用します。 '.business-directory#main-bg { background-position:-110px -70px; } ' あなたの問題を誤解していますか? – fredrikekelund

1

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

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

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

+0

大丈夫です。 ** **左側のロゴ**(** Z-インデックス:1 **)に**正のZ-インデックス**を追加しますが、** **ヘッダに** Z-インデックス**を追加する必要があります**(** z-index:1 **)。問題はまだ同じです。 @ゼータ –

関連する問題