Element with absolute positioning fails to be responsive - html

Question

I know there have been several questions on the subject but none of them quite answers my problem... I have 13 SVGs piled one over the other (I am using a JS script to make one appear and the other disappear, thus creating an "animation" effect where something moves from one position to the other) and I positioned them as absolute to have them piled. The problem is: I work on a 17" screen and when I look with screenfly what my page looks like on bigger screens (24"), my elements are not well positioned anymore.
I have already tried positioning it with all the units I knew of (px, %, vw/vh, em, rem) but none of this works for my case...
Here is a schematic HTML code:
<svg id="step1">Lots of stuff</svg>
<svg id="step2">Same here</svg>
.
.
.
<svg id="step13">Some more stuff</svg>
And here are the CSS rules I use:
#step1, #step2, #step3, #step4, #step5, #step6, #step7, #step8, #step9, #step10, #step11, #step12, #step13 {
position: absolute;
top: 1vh;
left: 8.5vw;
margin: 0 auto;
visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
height: 150px;
}
Here is the webpage for the animation, the one I am talking about is the "Tetris" animation for mobile phones so maybe you'll have to resize your browser to see it well...
If anyone has an idea about how to make it responsively positioned, I'd be really thankful.
Benjamin

Answer 1

Have you looked at flexbox with a columnar direction? The items will stay vertically centered no matter the screen height. Also, I removed the ids, since they are no longer necessary.
const steps = document.querySelectorAll('.step');
let delay = .25;
steps.forEach(step => {
step.style.animationDelay = `${delay}s`;
delay += .25;
});
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.step {
visibility: hidden;
opacity: 0;
border: 1px solid;
animation-name: makeVisible;
animation-duration: 1s;
animation-fill-mode: forwards;
padding: 1em;
}
#keyframes makeVisible {
to {
opacity: 1;
visibility: visible;
border-color: transparent;
}
}
<div class="step">One</div>
<div class="step">Two</div>
<div class="step">Three</div>
<div class="step">Four</div>
<div class="step">Five</div>
jsFiddle

Answer 2

You can use media query to resolve responsive issue. Try this i hope it'll help you out. Thanks
#media only screen and (max-width: 768px) {
.step {
position: static;
display: block;
}
}
.step {
position: absolute;
top: 1vh;
left: 8.5vw;
margin: 0 auto;
visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
height: 150px;
}
#media only screen and (max-width: 768px) {
.step {
position: static;
display: block;
}
}
<svg class="step" id="step1">Lots of stuff</svg>
<svg class="step" id="step2">Same here</svg>
.
.
.
<svg class="step" id="step13">Some more stuff</svg>