title: How to create fixed elements inside relative divs that only show when that div is visible
body: <p>For a client I have to code a website (one pager) with multiple sections one below the other. On the right side in the middle of the viewport should stand the title of each section. It should be (fixed) centered within the viewport and as you scroll through the site the titles should replace each other. It's kinda hard for me to explain so I will attached some sketches.</p>
  
  <p><strong>What I'm trying to achieve</strong></p>
  
  <p><img src="https://i.stack.imgur.com/y17s3.png" alt="Goal"></p>
  
  <p>I already thought I had it with the following code:</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>.section {
    position: relative;
    z-index: 0;
    min-height: 100vh;
    overflow: hidden;
  }
  
  .title {
    position: absolute;
  }
  
  .title-inner {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="section" style="background-color: #d2f8e6"&gt;
    &lt;div class="title"&gt;
      &lt;div class="title-inner"&gt;
        First Section
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   
   &lt;div class="section" style="background-color: #6689ff"&gt;
    &lt;div class="title"&gt;
      &lt;div class="title-inner"&gt;
        Second Section
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   
   &lt;div class="section" style="background-color: #d2f8e6"&gt;
    &lt;div class="title"&gt;
      &lt;div class="title-inner"&gt;
        Third Section
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But that only works in Safari, not in Chrome/Firefox. There all the titles are visibly stacked above each other. That kinda makes sense, as fixed elements create a new stacking context as far as I know. The the image below to see what I mean.</p>
  
  <p><strong>What I actually get (Chrome/Firefox)</strong></p>
  
  <p><img src="https://i.stack.imgur.com/tBl74.jpg" alt="Reality"></p>
  
  <p>Can somebody tell how I might achieve what I need? Even if I have to use JavaScript.</p>
  
  <p>Thanks a lot!</p>