全屏减去 z-index 锚点不可点击

Question

问题

我正在使用超大的 jQuery 作为全屏背景图像，这将是一个可点击的广告。在标记的主要内容之上，我使用了锚标记、固定位置、-1 的 z-index、显示块和 100% 的高度/宽度。所有这一切都完美无缺，问题是当应用 z-index 时，该锚标记的“可点击性”消失了。

有人有什么想法吗？我可以使用 2 个锚标签，定位主要内容的绝对位置并将它们推到每一侧，但是我不确定通常如何应用这种效果。

任何帮助将不胜感激

Answer 1

z-index 越低，它在堆叠上下文中的位置就越低。

理论上，在锚点上放置 -1 会将其置于 z-index 为 0 的元素下方，因此您可能会因此失去点击能力。

我找不到支持这一点的参考，但我认为不允许使用负值。

堆叠上下文参考： TimKadlec.com -- Detailed Look at Stacking in CSS

更新

一些快速的摆弄显示锚上的 z-index 为 -1：

• 与 页面上没有其他内容——成功了 在 Chrome 中不可点击。
• 与 页面上只有一个其他元素 -- 使锚点不可点击 Chrome 和 Firefox（但不是 IE8）

...所以我建议不要使用负 z-index。将其提高到 0，并将 z-index 设置为 1 的兄弟姐妹，看看是否有效。

Answer 2

即使您的某些元素可能有不可见的背景，您仍然无法点击它们。您必须首先确定不会导致点击广告的元素集。它们都必须是您的广告的兄弟元素或其子元素。现在，如果您在它们上设置background-color:red，则用户的点击不会触发您的广告（这当然只是为了形象化）。如果需要，您现在可以将广告的 z-index 设置为 -1。

之后您可能需要将position:relative 放在所有这些元素的父元素上，而不是正数。

body 标签也有可能会干扰。