当父元素的Z索引为负时，标签不可点击

Question

我有一个具有z-index: -1的div，并且在div内有一个div，其中包含多个a标记，但不可单击。我尝试将position:relative和z-index:1分配给内部div，但仍然无法点击。

.footer {
  position: relative;
  z-index: -1;
}

.footer .line {
  position: relative;
  z-index: 2;
}

...

<div class="footer">
  ...
  <div class="line">
    <a href="">example</a> ...
  </div>
  ...
</div>

Answer 1

这是不可能的...如果您将负Z索引放置在内容的后面，就好像您有某人躲在墙后，如果您向他开枪，墙会保护他。 ..

因此，您尝试将内部内容的z-index设置为正，但是如果父对象为负，则所有内容将被“不可见”的墙遮盖...

您必须将脚注设为正值或0 z-index ...

.footer{
    position:relative;
    z-index: 0;
}

================================

实际上有办法，​​但是不好。。。您可以将内部内容放在绝对位置...

.footer .line{
    position:absolute;
    z-index: 0;
}

Answer 2

如果您确实需要一个负索引，另一种解决方案是将页脚中的所有元素作为目标，除了您要在前面为负索引添加的元素。它可以根据您的需要进行工作，但请注意，如果其父项落后于该规则，则任何不受该规则定位的元素都将落后于此：

.footer *:not(.front){
    position: relative;
    z-index: -1;
    background-color: red;
}

.footer .front{
    z-index: 2;
}

<div class="footer">
    ...
    <p class="line">
        <a class="front" href="">example (behind because of parent)</a><br>
        <a href="">i am behind!</a><br>
        ...
    </p>
    <a class="front" href="">example</a><br>
    ...
</div>