title: Stacking with z-index in Firefox
body: <p>I'm using this great snippet to create a JS and CSS flip book: <a href="https://codepen.io/captain_anonym0us/pen/ybVbpv" rel="nofollow noreferrer">https://codepen.io/captain_anonym0us/pen/ybVbpv</a></p>
  <p>It works great in Chrome 98 but acts differently in Firefox 97.0 (64-Bit).</p>
  <p>Somehow an element with a z-index somewhere in the middle of all available z-indexes seems to be on top of it all.</p>
  <pre><code>&lt;div class=&quot;pages&quot;&gt;
    &lt;div class=&quot;page&quot; style=&quot;z-index: 29;&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;page&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;page&quot; style=&quot;z-index: 27;&quot;&gt;&lt;/div&gt;
    ...
    &lt;div class=&quot;page&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;page&quot; style=&quot;z-index: 15;&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;page&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;page&quot; style=&quot;z-index: 13;&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;page&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;page&quot; style=&quot;z-index: 11;&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;page&quot;&gt;&lt;/div&gt;
    ...
    &lt;div class=&quot;page&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;page&quot; style=&quot;z-index: 1;&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>In this example, the element with z-index 13 seems to be on top of it all in Firefox.</p>
  <p>Is this a bug or is there something (additional) in the code missing?</p>
  <p>Thanks in advance!</p>