title: tag <a> not clickable on relatively positioned block
body: <p>I have a little piece code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Asia Maldivas&lt;/title&gt;
          &lt;link rel="stylesheet" href="css/reset.css"&gt;
          &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;a href="#"&gt;TEST OUTER RELATIVE&lt;/a&gt;
          &lt;div class="bg"&gt;
             &lt;a href="#"&gt;TEST&lt;/a&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>.bg {
      position: relative;
      background: linear-gradient(to bottom, rgba(18,138,167,0.95) 30px,rgba(62,195,209,0.95) 7%,rgba(12,115,160,1) 100%);
      z-index: -1;
  }
  
  a {
      text-decoration: underline;
      z-index: 99;
  }
  </code></pre>
  
  <p>Now I have a link which is not clickable and I don't understand why.</p>