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

Question

问题

我正在使用jQuery超大的全屏幕背景图片，这将是一个可点击的广告。在标记的主要内容之上，我使用锚标记，位置固定，z-index为-1，显示块和高度/宽度100％。一切正常，问题是当应用z-index时，该锚标签的“可点击性”消失。

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

非常感谢任何帮助

Answer 1

z-index越低，堆叠上下文中的越低。

理论上，将-1放在锚点上会将它放在z-index为0的元素下面，因此你可能会失去点击能力。

我找不到支持这个的参考，但我不认为允许负值。

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

<强>更新

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

• 与 在网页上没有别的东西 - 做到了 在Chrome中无法点击。
• 与 只是页面上的另一个元素 - 使锚点无法点击 Chrome和Firefox（但不是IE8）

...所以我会反对负面的z指数。将它压缩到0，并将z-index为1放在兄弟姐妹身上，看看是否有效。

Answer 2

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

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

身体标签可能会发生干扰。