title: Place div between two div without manipulating DOM or using z-index
body: <p>I have a bunch of <code>div.page</code> with <code>position: fixed</code> and I want to put a semitransparent <code>div#overlay</code> between <code>Element n</code> and the others. Furthermore, the number of divs is unknown and can <strong>change</strong>. And the overlay must always be between the topmost div and the others.</p>
  
  <pre><code>&lt;div class="page"&gt;Element 1&lt;/div&gt;
  &lt;div class="page"&gt;Element 2&lt;/div&gt;
  ...
  &lt;div class="page"&gt;Element n&lt;/div&gt;
  
  &lt;div id="overlay"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I know that I can:</p>
  
  <ol>
  <li>manipulate the DOM or</li>
  <li>apply <code>z-index</code> to each div to put <code>div#overlay</code> in place</li>
  </ol>
  
  <p>Neither seems really clean. Is there another option?</p>
  
  <p>PS: Since I have to animate the opacity of <code>div#overlay</code>, I cannot use <code>:after</code></p>