Question

I'm trying to allow a user to click on a link that has a z-index of -1. I want the rest of the content of the page to go over the link when scrolling down, which works perfectly, but I can't click on the link.

HTML:

<html>
  <body>
    <div id = "aWrap">
    <a href = "#foo">I should be able to click this</a>
    </div>
    <div id = "foo">
      <p>Rest of page content</p>
    </div>
  </body>
</html>

CSS:

body {
  margin: 0;
  padding: 0;
}

#aWrap {
  height: 100vh;
}

a {
  display: block;
  z-index: -1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#foo {
  background-color: black;
  color: white;
  padding: 40vh;
  text-align: center;
}

Here's my pen: http://codepen.io/anon/pen/XKNRXx?editors=1100

Answer 1

这是一个更新的codepen，正如您所期望的那样：

http://codepen.io/thecox/pen/xORdEe?editors=1100

使用-1的z-index时，元素将放在所有元素下面，包括其父元素。更新到重叠容器上的z-index: 0和position: relative / z-index: 1会更正此问题。只有定位的元素才能使用z-index属性。

Answer 2

将z-index:0添加到a代码，并使用z-index:1添加相对位置到下一个div，如下所示：

  a {
      display: block;
      z-index: 0;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    #foo {
      background-color: black;
      color: white;
      padding: 40vh;
      text-align: center;
      position:relative;
      z-index:1
    }

如何允许点击<a> with z-index of -1

2 个答案: