不能在我的一个 div 中按下任何锚点

Question

在我的一个div中，锚和表单都不能正常工作。它们以应有的方式显示，但我根本不能按它们，它们的行为就像通常的文本/图片一样。这个div需要在它上面有一个透明的div(在它上面有一个不透明的文本)，所以我把它的z-index设置为-2。

div{
  position: relative;
  z-index:-2;
}

现在，当我删除z-index: -2时，锚和表单可以按下。但那样我的透明系统就毁了。

我如何使我的锚和输入表单可点击而不摆脱z-index属性?z-index破坏anchor功能的可能原因是什么?

Answer 1

设置为负的z-index会自动移除点击的能力，因为这实际上是在说这是在实际的表面之下。就像隔着玻璃墙看一样。

另一种合适的解决方案是增加其他元素的z-index，这样它们就会被放置在你需要在它们后面的元素的上面。

本质上，使用z- index总是向上而不是向下。

(注意:要获得更长的和更深入的答案，请查看Smashing的这篇文章。)

Answer 2

要有不透明的div，上面是透明的div，上面是带锚的不透明的div文本，我需要有z索引值:

div.transparent::after{
    content: '';
    background-color: black;
    opacity: 0.7;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}
div.non-transparent{
    position: relative;
    z-index: 0;
}

正负值都不能用于非透明div(从某种意义上说，正z-index使透明度消失，负z-index使锚不可点击)。