title: Firefox absolute position preventing button click
body: <p>I've read a number of things about this issue, but they don't seem to resolve my issue. Basically, on Firefox the child element (an svg) is overlaying the button and preventing it from being clickable. This code works fine in Chrome, but not in Firefox. I have tried to apply <code>height: 100%</code> and <code>width: 100%</code>, the suggested fix this issue, but the clickable area begins halfway within the element (see image).</p>
  
  <p><a href="https://i.stack.imgur.com/PByjy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PByjy.png" alt=" clickable area begin half way within the element"></a></p>
  
  <p>How can I correct this in a way that works across modern browsers? </p>
  
  <p>I just want the button to be the size the child elements. The complication comes from the button needing to be vertically centred in the container div, which is why it has <code>top: 50%</code>. This is a reuseable component, so I need a way for it to be vertically centred in a dynamic fashion, so can't just hack the position. </p>
  
  <p>I have mocked up an example here:</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-js lang-js prettyprint-override"><code>$('button').on('click', (e) =&gt; {
   alert('clicked');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>button {
    z-index: 1;
    position: absolute;
    top: 50%;
    background-color: transparent;
    border: none;
  }
  
  div {
    position: absolute;
    top: -43px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button&gt;
    &lt;div&gt;
      &lt;svg width="400" height="110"&gt;
      &lt;rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /&gt;
      Sorry, your browser does not support inline SVG.  
    &lt;/svg&gt;
    &lt;/div&gt;
    
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help would be appreciated. </p>