CSS 相对和绝对

Question

我正在尝试设置 CSS RWD 以使机箱图像、主板、CPU 和 GPU 保持原位，即使我切换了屏幕的宽度和高度。 我需要让它响应。 但是有什么办法可以不让他们翻来覆去吗？ 当我使用 RWD 检查器并在移动设备的断点内更改设置时，它就会中断。

我想这样做的原因是因为如果没有启用 JS，我希望它是 static，但是当它启用时，我可以在加载文档时从左到右在它的原始位置进行动画处理，作为欢迎 animation。 我似乎无法找到 CSS 的最佳选择，以使其适合各种分辨率。

我不允许使用任何框架，只需要原始 HTML CSS 和 JS。

如果我不能以这种方式修复它，我会将其制作为图像并仅使用图像映射，但我真的想为它制作动画。

@media only screen and (max-width: 756px){



#animation{
position: relative;
margin: 0 auto;
bottom:0vh;
Left: 40%;
width:100vw;
height: 50vh;
/* overflow: hidden; */
/* background-image: url("../images/plucked/case.png");
background-repeat: no-repeat;
background-size:contain; */
}
#caseAnimated{
position: absolute;    
top:0vh;
width: 50%; 
Left: 0vw;  
}
#moboAnimated{
position: absolute;    
top:0vh;
width: 37%; 
Left: 0vw;  
}
#cpuAnimated{
position: absolute;
top: 62px;
width: 10%;
Left: 15vw;
}
 #cpuAnimated:hover{
 outline: auto; 
 border: brown solid 2rem;
z-index: 2;
}
#gpuAnimated{
position: absolute;
top: 22vh;
width: 30%;
Left: 2vw;
}
#gpuAnimated:hover{
outline: auto;
border: brown solid 2rem;
 z-index: 2;
}

有什么办法可以做到这一点吗？

Github 是https://github.com/Razoorsharp/MM-4