CSS中的背景图像“链接”

Question

我继承了一个大型项目，该项目已经拥有一个大型标记库以及一个短期限，因此完全重写是不可能的。因此，我有一个问题需要尽快解决：

（事先原谅我神秘的速记）

我有一个包含UL和DIV的标题。

div id="header"
    ul id="nav"
        <a li />
        <a li />
        <a li />
    /ul
    div id="promotion"
        p
    /div
/div

我想将背景图像（即整个DIV）作为链接，所以我将其添加到标记中：

div id="header"
    a id="overlay"
 ...

那个CSS就是这样的（不是确切的CSS，我在家时无法访问该文件）：

a#overlay {display: block; width: xxx, height: xxx, z-index: -1

现在这里是踢球者：UL和其他DIV需要位于​​“叠加”之上，因为它们中有自己的链接。这适用于FF3和IE8，但不适用于IE6 / IE7。我正在寻找一个解决这个问题的通用解决方案，它在IE6 / IE7中是兼容的（并且删除IE6不是一个选项，这是一个大客户端）

有什么建议吗？这里简单来说就是：header - ＆gt;链接覆盖 - ＆gt; ul链接 - ＆gt;链接覆盖顶部的其他元素

Answer 1

您可以使用JavaScript将点击处理程序附加到该背景，而不是依赖链接。

document.getElementById('overlay').onclick = function() {
    window.location = 'http://www.google.com/';
}

Answer 2

IE6 / 7 does not respect the z-index stacking context正如您所期望的那样。您是否尝试在父锚点的子元素上设置更高的索引？

Answer 3

这是我在阅读Tate Johnson提供的链接后想出的generic solution。

我对它进行了测试，可以确认它适用于IE5.5 / 6/7/8，FF3，Chrome和Safari。

我忽略了如果你要使用z-index，你需要声明每个元素的位置。将所有内容设置为position：relative（除了链接，设置为position：absolute）就可以了。