1

infopathから取得し、xsltを介して処理しているテーマ画像があります。この画像を自分のサイトのヘッダーのテーマとして使用しています。これが私の現在の構造です

<div id="mainContent"> <a href="http://xyz.com">testlink</a></div>
<div id="theme"><a href="http://aaa.com"><img src="abc.jpg" /></a></div>

テーマをヘッダーバーの後ろにposition：absoluteとz-index：-1で配置しています

今の私の問題は、このテーマ画像をクリック可能にする必要があるということです。ただし、mainContent divにリンクがある場合は、それも機能するはずです。また、画像パスを（infopathを介して）構成可能にする必要があり、cssでハードコーディングできないため、画像を背景として使用できません。

IEブラウザーでは、IEで下位のzインデックスdivにアクセスできるため、上記の構造は正常に機能し、クリックできます。ただし、他のブラウザはそうではありません。IE 7以降および最新バージョンのFirefox、Chrome、Safariで動作するユニバーサルソリューションが必要です

注：フォーラムに質問を投稿するのは初めてです。質問で不明な点がある場合はお知らせください。

4

1 に答える 1

0

HTMLを変更できる場合、解決策は、テーマdivを最初に配置し、両方のdivをposition：absoluteに配置することです。その場合、z-indexは必要ありません。

簡単な例はここにあります：jsFiddleexample。

cssコードは：

#theme {
    position: absolute;
    top:0;
    left:0;
}
#mainContent {
    position: absolute;
    top:0;
    left: 0;
}

この回答に触発された他の方法：テーマ画像をmainContent divの一部として設定し、絶対位置とz-indexを設定し、その他すべてを相対位置とより大きなz-indexで設定します。この例を参照してください。

于 2012-11-16T10:58:59.267 に答える