3

メインコンテンツ領域の左側に336x768pxの画像があり、メインコンテンツ領域の右側に別の画像があるサイトスキンを配置する必要があります。

正しく配置することはできますが、画像をクリック可能にすることはできません。コンテナのz-indexに関係していると思いますが、調整することができません。

コードをデモンストレーションして表示するためにjsfiddleを作成しました：http： //jsfiddle.net/puTEe/

左右の画像をクリックすると、google/yahooへのリンクをクリックしているはずです。

CSS：

.site-skin {
    width: 96px;
    height: 76px;
    position: absolute;
    z-index: -1;
}

#skin-right {
    right: 0;
}

#main-container {
    width: 96px;
    height: 60px;
    margin: auto;
}

HTML：

<div class="site-skin">
      <a href="http://google.com">
          <img src="http://placehold.it/96x76">
      </a>
  </div>

  <div class="site-skin" id="skin-right">
      <a href="http://yahoo.com">
          <img src="http://placehold.it/96x76">
      </a>
  </div>

  <div id="main-container">
      main content
  </div>​
4

2 に答える 2

4

なぜ負のz-indexを使用しているのですか？それはあなたの問題だ。それらを非負にすると、正常に機能します。

注意点として、負のz-index値は許可されます#main-containerが、z-indexが設定されていないため、デフォルトでゼロになり、ページの横にある他のdivの上に効果的に配置されます。負のz-indexを低く設定#main-container（および配置）すると、問題も解決しますが、私の意見では、現在の負のz-indexを正のz-indexに変更する方が理にかなっています。

于 2012-10-11T19:31:08.810 に答える
2

正のz-index値が必要です。これは機能するはずです。

作業バージョン

于 2012-10-11T19:30:44.853 に答える