title: a not clickable in a div
body: <p>I have this code</p>
  <p><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>.dark-bg {
    width: 30%;
    height: 100vh;
    background: linear-gradient(90deg, rgb(58, 10, 123) 15%, rgb(67, 28, 158) 90%);
    float: left;
    z-index: 100;
  }
  
  .wave {
    position: absolute;
    content: "";
    bottom: 0;
    width: 30.06%;
    height: 100vh;
    transform: rotate(180deg);
    background: url(https://i.imgur.com/Ds3Raj2.png);
    background-size: contain;
    background-repeat: no-repeat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href='/hgt'&gt;test&lt;/a&gt;
  &lt;div class="dark-bg" }&gt;
    &lt;a href='/hgt'&gt;test2&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="wave" }&gt;
    &lt;a href='/hgt'&gt;test 3&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Codepen link : <a href="https://codepen.io/bagou4502/pen/dyZYJpQ" rel="nofollow noreferrer">https://codepen.io/bagou4502/pen/dyZYJpQ</a></p>
  <p>And i can t click on test 2.
  I try to add a z index but not work.</p>