我有 10 个不同的重叠 div，每当我调整屏幕大小时，元素移动时看起来彼此无关，即使它们都是绝对定位的。
我试过只关注视频 div 和容器 div（这就是为什么它们是仅有的两个具有百分比间距的 div）以保持它们的大小成比例，但经过大约 2 周的摆弄后我似乎无法得到它。
任何帮助表示赞赏。 html:
#video {
position: absolute;
top: 10%;
right: 0;
bottom: 0;
left: 60%;
margin: 0;
overflow: 0;
background-color: transparent;
background-position: cover;
}
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: 0;
margin: 0;
background-color: transparent;
background-position: cover;
}
#hand {
height: 100px;
width: 300px;
position: absolute;
top: 100px;
right: 100px;
bottom: 600px;
left: 200px;
margin: auto;
background-color: transparent;
}
#load {
height: 100px;
width: 300px;
position: absolute;
margin: auto;
background-color: transparent;
}
#email {
height: 100px;
width: 100px;
position: absolute;
top: 550px;
right: 600px;
bottom: 0px;
left: 00px;
margin: auto;
background-color: transparent;
}
#cv {
height: 100px;
width: 300px;
position: absolute;
top: 430px;
right: 700px;
bottom: 0px;
left: 00px;
margin: auto;
background-color: transparent;
}
#channel {
height: 500px;
width: 500px;
position: absolute;
top: 0;
right: 00;
bottom: 0;
left: 0;
margin: auto;
background-color: transparent;
background-position: center;
background-size: cover;
}
.grid {
margin: 0;
padding: 0;
border: none;
outline: 1px solid white;
display: inline-block;
}
#button1 {
position: absolute;
top: 200px;
right: 0px;
}
#button2 {
position: absolute;
top: 130px;
right: 0px;
}<body style="background-color:black">
<div id="video">
<video id="content" width=50% height=auto autoplay muted>
<source src="friend.webm" type="video/webm">
</video>
</div>
<div class="container">
<img src="Clayvision.png" width=100% height=auto>
</div>
<div id="hand">
<video id="control">
<source src="hand1.webm" type="video/webm">
</video>
</div>
<div id="load">
<video id="loading" muted autoplay loop>
<source src="Loading.webm" type="video/webm">
</video>
</div>
<div id="email">
<a href="[email protected]">
<video id="gmail">
<source src="gmail.webm" type="video/webm"></video>
</a>
</div>
<div id="cv">
<a href="https://drive.google.com/file/d/1-taF_MrzsHWSm05RJ5EyMe1Y0eZkFcTm/view?usp=sharing">
<video id="resume">
<source src="resume.webm" type="video/webm"></video>
</a>
</div>
<div id="channel"></div>