css - 如何使主题图片可点击

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>

我通过 position:absolute 和 z-index:-1 将主题放在标题栏后面

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

在 IE 浏览器中，上述结构工作正常，因为 IE 允许我们访问较低的 z 索引 div，我可以单击它。但是其他浏览器不是。我需要一个适用于 IE 7+ 和最新版本的 Firefox、Chrome 和 safari 的通用解决方案

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

Answer 1

如果您可以更改 html，解决方案是将 theme div 放在第一位，然后将两个 div 都放在 position:absolute 中。那时你不需要 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 .