Css 如何使主题图像可点击

我有一个主题图像，我从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索引：-1

现在我的问题是，我必须使这个主题图像可点击。不过，如果我在mainContent div上有一个链接，那也应该可以。此外，我不能使用图像作为背景，因为我必须使图像路径可配置（通过infopath），并且不能在css中硬编码

在IE浏览器中，上面的结构运行良好，因为IE允许我们访问较低的z索引div，我可以单击它。但是，其他浏览器则不然。我需要一个通用的解决方案，应该在IE7+和最新版本的Firefox、Chrome和safari中工作

---

注意：我在论坛上发布问题是新手，所以如果我的问题中有任何不清楚的地方，请告诉我

如果您可以更改html，解决方法是将主题div放在第一位，并将两个div放在位置：绝对。那么你就不需要z-index了

这里可以找到一个简单的示例：

css代码为：

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

---

其他方法的灵感来自：将主题图像设置为mainContent div的一部分，使用position-absolute和z-index集，其他所有设置都使用position-relative和更大的z-index。请参阅。

您的小提琴工作正常，但我必须将标题设置为固定高度和宽度（以匹配我的UI）。若我为两个div制作相同的高度和宽度，那个么我只得到内容div，而主题div隐藏在后面。因此不可点击（在所有浏览器中）请参见fiddle