title: css overlay: how do I maintain "relative" position on a "fixed" element?
body: <p>I have a simple css/js animation that I have styled with 'position: fixed' attribute so that it overlays other elements on the page.</p>
  <p>However, I still want the animation to position itself relative to other elements and while this appears to work OK on a full-width page, it goes awry on mobile layouts.</p>
  <p>Here's a quick example: <a href="https://codepen.io/Megistus/pen/poLGbyL" rel="nofollow noreferrer">https://codepen.io/Megistus/pen/poLGbyL</a></p>
  <pre><code>body{
    background-color: yellow;
  }
  .body-sw {
    background-color: none;
    height: 20vh; 
    display: block;
    //align-items: center;
    justify-content: center;
    position: fixed;
    top: 3%;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .sound-wave {
    height: 20vh;
    display: flex;
    align-items: center;
    //justify-content: center;
    position: absolute;
    top: 3%;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .body-sw .bar {
    animation-name: wave-lg;
    animation-iteration-count: 3;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    background: #006565;
    margin: 0 1.5px;
    height: 10px;
    width: 1px;
  }
  .body-sw .bar:nth-child(-n+7), .body-sw .bar:nth-last-child(-n+7) {
    animation-name: wave-md;
  }
  .body-sw .bar:nth-child(-n+3), .body-sw .bar:nth-last-child(-n+3) {
    animation-name: wave-sm;
  }
  
  @keyframes wave-sm {
    0% {
      opacity: 0.35;
      height: 10px;
    }
    100% {
      opacity: 1;
      height: 25px;
    }
  }
  @keyframes wave-md {
    0% {
      opacity: 0.35;
      height: 15px;
    }
    100% {
      opacity: 1;
      height: 50px;
    }
  }
  @keyframes wave-lg {
    0% {
      opacity: 0.35;
      height: 15px;
    }
    100% {
      opacity: 1;
      height: 70px;
    }
  }
  </code></pre>
  <p>(excuse the messy css, there's a lot of unnecessary guff in there!)</p>
  <p>As you can see, I'm hoping got the animation to maintain its position between the &quot;LOGO&quot; div above and the &quot;content&quot; div below, but for the expanded &quot;bars&quot; in the animation to overlay the elements above and below it when the animation plays (on page load).</p>
  <p>Is there a way to do this?</p>