css overlay: how do I maintain "relative" position on a "fixed" element? - css

Question

I have a simple css/js animation that I have styled with 'position: fixed' attribute so that it overlays other elements on the page.
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.
Here's a quick example: https://codepen.io/Megistus/pen/poLGbyL
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;
}
}
(excuse the messy css, there's a lot of unnecessary guff in there!)
As you can see, I'm hoping got the animation to maintain its position between the "LOGO" div above and the "content" div below, but for the expanded "bars" in the animation to overlay the elements above and below it when the animation plays (on page load).
Is there a way to do this?

Answer 1

You actually do not want to use position: fixed;. This will forced the element to a fixed position on the page.
Instead, you can set position: absolute;, which will give you what seems to be the same result, however if you modify your HTML a little, you can get the animation to stay with the logo.
You need to place the animation elements inside of a container that holds both the logo and the animation. Then if you set this parent container to position: relative; now your animation elements will stay with the logo and the position: absolute; you set will allow the animation to overlay the logo still.
window.addEventListener("load", () => {
const bar = document.querySelectorAll(".bar");
for (let i = 0; i < bar.length; i++) {
bar.forEach((item, j) => {
// Random move
item.style.animationDuration = `${Math.random() * (0.7 - 0.2) + 0.2}s`; // Change the numbers for speed / ( max - min ) + min / ex. ( 0.5 - 0.1 ) + 0.1
});
}
});
body{
background-color: yellow;
}
.logo { position: relative; }
.body-sw {
background-color: none;
height: 20vh;
display: block;
//align-items: center;
justify-content: center;
position: absolute;
top: -.5em;
left: -.5em;
right: 0;
bottom: 0;
}
.sound-wave {
height: 20vh;
display: flex;
align-items: center;
//justify-content: center;
}
.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;
}
}
<br>
<br>
<br>
<div class="logo">
<h1>LOGO</h1>
<div class="body-sw">
<div class='sound-wave'>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
</div>
</div>
</div>
<div>
<h1>Content....</h1>
</div>