我有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="noahmreiner@gmail.com">
<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>绝对定位的元素将根据与窗口边界的固定距离移动。因此，当您调整窗口大小时，所有div都会随机移动，因为它们不会相对移动。要解决这个问题，只需更改所有位置：绝对到
position: relative;
然后使用像css网格或flexbox这样的网格系统。