[SOLVED] Divs keep moving around seemingly at random

Divs keep moving around seemingly at random

I have 10 different overlapping divs, and whenever I adjust the screen size, the elements move seemingly unrelated to each other, even though they're all positioned as absolute.

I've tried just focusing on the video div and the container div (That's why they're the only two divs with percentage spacing) to keep their sizes proportional, but I just cannot seem to get it after about 2 weeks of fiddling.

Any help is appreciated. 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>

Solution

Absolute positioned elements will move according to a fixed distance from the window border. So when you resize the window, all divs will move randomly because they aren't moving relatively to one another. To solve this, simply change all postition: absolute to

position: relative;

and then use a grid system like css grid or flexbox.