title: CSS: prevent fixed elements from overlapping scrollbar
body: <p>For my application, I'm using react-router to create transitions between pages. The issue is: I would like to make an effect of "window inside window" to make the transition work, but there is a problem. I'm able to creating a stacking context with <code>transform: translate3d(0, 0, 0);</code>. In order to make fixed elements stay on top and not scroll with the context, I need another element inside, that would hold overflowing content.</p>
  
  <p>Here is what I tried:</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>document.getElementById('content').innerHTML = 'content here '.repeat(500)</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    margin: 0;
    height: 100vh;
    width: 100vw;
  }
  
  .window {
    background: palevioletred;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    /* I may use absolute position, don't think that
      matters much though */
    position: relative; 
    transform: translate3d(0,0,0);
  }
  
  .root {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: auto;
  }
  
  header {
    background: turquoise;
    color: white;
    height: 2rem;
    position: fixed;
    top: 0; left: 0; right: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="window"&gt;
    &lt;div class="root"&gt;
      &lt;header&gt;Some content here&lt;/header&gt;
      &lt;main id="content"&gt;&lt;/main&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I want is to somehow make the <code>.window</code> element behave like <code>window</code> in browser, i.e. display scrollbar when the content overflows and create fixed elements actually fixed while keeping them inside, so that they don't overlap the scrollbar and user can scroll while hovering over them (which is crucial for me).</p>
  
  <p>Basically I want something like this, but using <code>div</code>'s somewhere deeper in the DOM tree than inside <code>body</code> and keeping the stacking context:</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>document.getElementById('content').innerHTML = 'content here'.repeat(500)</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body { margin: 0 }
  
  body {
    width: 100vw;
    min-height: 100vh;
    background: palevioletred;
  }
  
  header {
    background: turquoise;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;header&gt;Header&lt;/header&gt;
    &lt;main id="content"&gt;&lt;/main&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also I don't want to restructure anything outside, I basically want an isolated window inside window. Sounds a bit complicated, and I'm not sure if that's possible at all.</p>