title: html position absolute prevents onclick from clicking
body: <p>I have a button element with a class that has position="absolute". This is preventing the button from being clicked. As soon as I remove the position absolute, the positioning of the button changes to where I don't want it, but the clicking works. The z-index=-1 was intended bc the button lays over another component. How do I get it to keep position absolute AND clickable?</p>
  
  <pre><code>&lt;button type="button" onclick="RandomFunction()" class="b-Crown"&gt;&lt;/button&gt;
  
  .b-Crown {
      cursor: pointer;
      padding-left: 25px;
      margin: auto;
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: -1;
      width: 15px;
      height: 26px;
      top: -163px;
      left: 265px;
      border-radius: 5px;
      background: #999;
      border-right: 2px solid rgba(0, 0, 0, 0.05);
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  }
  </code></pre>