如何使主题图像可点击

Question

我有一个主题图片，我从一个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>

我将我的主题放在我的标题栏后面的位置：绝对和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-index，以及其他具有位置相对和更大z-index的内容。请参阅this example。