title: Sticky element on top of other elements without leaving container
body: <p>I have a site I need to make it where as you scroll down the page a phone sticks in place, in the center, and the  phone content swaps as you scroll until you reach a certain point (such as the footer). The issue I'm running into is keeping it within the scrollable area since the only way I could figure out how to overlay it is with position:absolute. Adding that, however, means it's no longer &quot;sticky&quot; within the container. It pops out.</p>
  <p>Here's an example (you can run a demo below): <a href="https://codepen.io/oscargodson/pen/OJXJGRL" rel="nofollow noreferrer">https://codepen.io/oscargodson/pen/OJXJGRL</a></p>
  <p>Screenshots:</p>
  <p>Page load</p>
  <p><a href="https://i.stack.imgur.com/KqQFz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KqQFz.png" alt="enter image description here" /></a></p>
  <p>Scrolling down (notice its centered still and overlaying on top of everything else)</p>
  <p><a href="https://i.stack.imgur.com/BvIwH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BvIwH.png" alt="enter image description here" /></a></p>
  <p>The green border is the yellow square's (phone image in real life) container/parent. Notice how it comes out.</p>
  <p><a href="https://i.stack.imgur.com/qfuh3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qfuh3.png" alt="enter image description here" /></a></p>
  <p>I'd really rather not use JS if at all possible but if it's the only way that's fine.</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>.panel-wrapper {
    border: 5px solid chartreuse;
    position: relative;
  }
  
  .panel {
    height: 100vh;
  }
  
  .panel-1 { background: aqua; }
  .panel-2 { background: blue; }
  .panel-3 { background: darkblue; }
  
  .sticky-wrapper {
    width: 100%;
    position: sticky;
    background: transparent;
    top: calc(100vh/2 - 613px/2);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 3;
  }
  
  .sticky-element {
    width: 315px;
    height: 613px;
    background: yellow;
    position: absolute;
    top: 0;
  }
  
  footer {
    font-size: 100px;
    font-weight bold;
    text-align: center;
    padding: 250px 0;
    background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer-wrapper"&gt;
    &lt;div class="panel-wrapper"&gt;
      &lt;div class="sticky-wrapper"&gt;
        &lt;div class="sticky-element"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel panel-1"&gt;&lt;/div&gt;
      &lt;div class="panel panel-2"&gt;&lt;/div&gt;
      &lt;div class="panel panel-3"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;footer&gt;
       Should not overlap here!
    &lt;/footer&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>