1

我有一个主题图像，我从信息路径获取并通过 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 了。

可以在此处找到一个简单的示例：jsFiddle 示例。

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 回答