如何製作可點擊的主題圖片

Question

我有一個主題圖片，我從信息中獲取並通過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> 

我把我的主題我的標題欄落後的位置是：絕對的z-index：-1

現在我的問題是，我不得不做出這個主題圖像點擊。但是，如果我有mainContent div上的鏈接，那也應該起作用。此外，我不能使用圖像作爲背景，因爲我必須使圖像路徑可配置（通過infopath），並且無法在css中對其進行硬編碼。

在IE瀏覽器中，上面的結構工作正常，IE允許我們訪問較低的z索引div，我可以點擊它。但其他瀏覽器不是。我需要一個通用的解決方案，它應該可以在IE 7+以及Firefox，Chrome和Safari瀏覽器的最新版本中工作。

注意：問題

Answer 1

如果你可以改變你的HTML，一個解決辦法是把主題 DIV第一，並把雙方的div在位置：絕對。那麼你不需要z-index。

一個簡單的例子可以在這裏找到：jsFiddle example。

CSS代碼之中：

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

其他方法，通過This answer啓發：設置主題圖像作爲搜索Maincontent DIV的一部分，位置絕對和z索引集，以及相對其他一切與位置和較大的Z指數。請參閱this example。