0

ウェブサイトを作成しましたが、現在 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;

ラップします。そして追加

    z-index: -9999;

#メイン背景へ。

しかし、これを行った後...ロゴやナビゲーションリンクさえもクリックできません。

なぜ私がこの問題を引き起こしているのか教えてください。

ありがとうございました

4

2 に答える 2

1

z-index自分が何をしているのか正確にわからない場合は、否定語を使用しないでください。正の値を使用し、 をさらに高い値に設定#left-side-logoしz-indexます。

#wrapには負の があるため、後者のスタッキング インデックスでz-indexのコンテンツの後ろに配置されます。#inner-wrapper

以下も参照してください。

于 2012-04-15T20:57:33.867 に答える
0

私があなたなら、さまざまな背景画像を適用する要素を簡単に変更します。都市#inner-wrapperの画像の背景と#main-bgロゴの背景を指定します。次に、background-positionプロパティを使用してロゴの背景を配置します（現在、backgroundルールの2つのゼロ）。また、そのロゴの不透明度が必要な場合は、Photoshopまたは任意のエディターで設定するだけで不透明度を上げることができます。

このソリューションは、問題に対処する必要がないことをz-index意味し、いくつかのコンテナーがありますが、ハッキングのない、セマンティックなマークアップを実現します。お役に立てれば ：）

于 2012-04-15T21:03:55.960 に答える