HTML,CSS 如何点击div z-index -1, with href

Question

如何点击带有div z-index:-1的链接。

我需要一个带有 z-index -1 的 div，在这个 div 中是一个链接，当 z-index 为 1 或更大时，div 中的链接是可点击的，但是当我将 z-index div 设置为-1 , 链接无法点击如何解决。

CSS

.div1 {
      z-index: 1;
}
.div2 {
      z-index: 2;
}
.div3 {
      z-index: -1;
}

HTML

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3"><a href="">Clickable link with z-index -1</a></div>

Answer 1

使用 position: relative 并让所有元素都具有正的 z-index。

.div1,
.div2 {
  position: relative;
}

.div1 {z-index: 3;}

.div2 {z-index: 2;}

.div3 a {z-index: 1; position: absolute; left: 0; right: 0; bottom: 0; top: 0;}

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3"><a href="">Clickable link with z-index -1</a></div>