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.

#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;  }  

https://stackoverflow.com/questions/65387084/divs-keep-moving-around-seemingly-at-random December 21, 2020 at 11:04AM