title: CSS position Sticky and Z-Index overlay/modal
body: <p>i have a problem with the position: sticky and z-index</p>
  
  <p>I want my modal in the sticky-element to be overlayed by the overlay.
  With position: relative it works: the modal is before the overlay. But when I use Sticky the modal is behind the overlay.</p>
  
  <p>Hope it's understandable what I mean.
  Here's the example:</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-css lang-css prettyprint-override"><code>.sticky {
      position: sticky; /* &lt;-- dosen't work */
      /* position: relative; /* &lt;-- work */
      top: 0;
  
      width: 100%;
      height: 200vh;
      background: red;
  }
  
  .modal {
      z-index: 1000;
  
      position: fixed; 
      margin: 0 auto;
      width: 200px;
      height: 200px;
      background: yellow;
      margin: 0 auto;
  }
  
  .overlay {
      z-index: 999;
      position: fixed;
  
  
      width: 100%;
      height: 100%;
      background: green;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      opacity: 0.75;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;div class="sticky"&gt;
      &lt;div class="modal"&gt;modal&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>