图像上的 Z 索引？答案

【问题标题】：Z-index over an img?图像上的 Z 索引？
【发布时间】：2009-09-09 14:15:38
【问题描述】：

考虑这个页面@http://www.bloodbone.ws/screwed.html

我需要能够将a.grow 元素扩展到div.column-header 的尺寸，这样如果您定位到div 中的任何位置，整个区域都是可点击的。

它可以在 Firefox + Safari 中运行，但我无法让它在任何 IE 浏览器中运行。

h2 和 img 元素总是会破坏 a.grow，因此有些区域是不可点击的。

我已经尝试了所有我能想到的方法，添加了zoom: 1 等都无济于事。

h2 和 img 必须可见，但任何鼠标悬停在该区域上都应该是可点击的。

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

要让它“与 SEO 兼容”，您有 2 个选项：

应用多个锚标签覆盖所有 div；
使用 JQuery 之类的框架使 div 可点击（点击时跟随锚点 href），并为 SEO 目的将锚点保留在 div 内。

【讨论】：

我最终使用 jQuery 为 IE 做这件事。仍然让我感到困惑，为什么 CSS 解决方案是不可能的。
嗯，css 实际上是可能的，但它有点冒险.. 唯一的 w3c 使用 css 的有效选项是创建一个定位标记绝对高于您想要的区域，但这需要您设置固定在 div 上的位置（顶部和左侧始终固定）或使用 javascript 计算 div 的位置（由于页面的重新调整，不是 100% 忠实）
为什么不能将div 设置为position: relative 然后给锚元素指定它的尺寸？
只有当 div 里面唯一的东西是锚时才会起作用。想想一个装满水的杯子：如果你把一颗葡萄放在杯子里，那颗葡萄会在里面占据一定的空间不能同时被水占据的杯子。它在 html / css 中几乎相同
很抱歉要坚持下去，但我不太清楚为什么这个例子不适用于我发布的代码。 a.grow 在 div.column-header 内，我希望它在 h2 和 img 元素上“冒泡”。因为它没有background 集，即。透明，可以看到其他元素，但a.grow 应该是鼠标悬停时唯一具有焦点的东西。我的哪一部分推理有缺陷？

【解决方案2】：

会

    <div class="column-header">
        <a class="grow" href="http://www.google.com">Google</a>     
        <h2>What's On</h2>
        <a href="http://www.google.com">
            <img src='http://www.bloodbone.ws/images/mainHeader.jpg' alt='boo' />
        </a>
    </div>

做吗？

【讨论】：

可以，但是 HTML 无效
我编辑了代码，看来您正试图使其适用于 SEO 对吧？我想两个不同标签的锚不会受伤......
是的，它不会受到伤害，但它并不能完全解决问题，因为h2 文本也会“破坏”覆盖。这只是其中之一，您会感到难以置信，因为它应该工作并且确实（在 Safari/FF 中）但由于某种原因 IE 会跳闸。
冒着听起来很傻的风险，但为了扩展知识，是什么让它无效的HTML？
Delilah，我不知道你们在说什么，但是根据“w3c 法律”，anchor 不允许在其中包含 img 标签。