title: a tag not clickable when parent element has negative z-index
body: <p>I have a div that has a <code>z-index: -1</code> and inside the div there is a div that contains several <code>a</code> tags but it is not clickable. I have tried to assign <code>position:relative</code>and <code>z-index:1</code> to the inner div but it is still not clickable.</p>
  
  <p><a href="https://i.stack.imgur.com/ia88v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ia88v.png" alt="enter image description here"></a>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.footer {
    position: relative;
    z-index: -1;
  }
  
  .footer .line {
    position: relative;
    z-index: 2;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>...
  
  &lt;div class="footer"&gt;
    ...
    &lt;div class="line"&gt;
      &lt;a href=""&gt;example&lt;/a&gt; ...
    &lt;/div&gt;
    ...
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>