title: Absolute positioning with an onclick event works in chrome but not firefox
body: <p>I have a problem with a button that is styled by an absolute-positioned image and is attached to an onclick event. The code here works in chrome but not in firefox (in chrome I can see the alert after clicking the button, but in firefox clicking has no effect):</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>function buttonClick(id) {
    alert("button clicked: " + id)
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.gameButtons {
      position: absolute;
      margin: auto;
      height: 6vh;
  }
  
  #environment {
      overflow: hidden;
      position:absolute; 
      height:100%;
      width:100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="environment"&gt;
    &lt;div id="allGameButtons"&gt;
      
      &lt;button id="s1b" onclick="buttonClick(this.id);"&gt;&lt;img src="https://akm-img-a-in.tosshub.com/indiatoday/images/story/201708/cats-xl_080817011942.jpg" id="s1" class="gameButtons" style="height: 8vh; left:51vw; top:65vh;" alt="s1_button"&gt;&lt;/button&gt;
    
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>After reading about the issue it appears that in firefox, the position:absolute applied to .gameButtons is placing the image in front of the button, making it unclickable. I have tested solutions including adding z-indexes to .gameButtons and #s1b, changing .gameButtons position to relative (which misplaces the image), and adding the onclick event in javascript instead of in the html. Any ideas how I may find a solution that works for both browsers?</p>
  
  <p>Thanks, any advice is appreciated.  </p>