title: Button not laid out against top of relatively positioned container in Firefox
body: <p>I'm building a toggle switch and the head (button) isn't positioned all the way to the top as I'd expect it to be in Firefox. Works fine in Chrome, so maybe has something to do with default browser styles?</p>
  <p>Edit: I know how to make it work, I want to know why it happens.</p>
  <p><a href="https://codepen.io/warhammered_cat/pen/qBZYZVy" rel="nofollow noreferrer">codepen https://codepen.io/warhammered_cat/pen/qBZYZVy</a></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>const toggleSwitch = document.querySelector('.toggle-switch')
  const toggleSwitchHead = document.querySelector('.head')
  
  function handleToggle(e) {
    toggleSwitch.classList.toggle('active')
  }
  
  toggleSwitchHead.addEventListener('click', handleToggle)</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  document, body {
    margin: 0;
    padding: 0;
  }
  
  .head {
    width: 1.25rem;
    height: 1.25rem;
    border: 0.125rem solid gray;
    border-radius: 50%;
    background-color: white;
    cursor: pointer;
    transition: all 0.4s;
    outline: none;
    box-shadow: none;
  }
  
  .rail {
    height: 0.75rem;
    width: 100%;
    background-color: gray;
    border: 0.125rem solid gray;
    position: absolute;
    top: 0.25rem;
    z-index: -1;
    border-radius: 0.3rem;
    transition: all 0.4s;
  }
  
  .toggle-switch {
    position: relative;
    height: 1.25rem;
    width: 2rem;
  }
  
  .toggle-switch.active &gt; .head {
    background-color: #F7941E;
    border-color: #F7841E;
    transform: translateX(1rem);
  }
  
  .toggle-switch.active &gt; .rail {
    border: 0.125rem solid #F7941E;
    background-color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='toggle-switch'&gt;
    &lt;button class='head'&gt;&lt;/button&gt;
    &lt;div class='rail'&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>