CSS positioning styles impact on the other objects

I am working a project on my favorite science stories animated using HTML. While I was working on it By just changing the position to fixed or nothing position of all my objects was changing. If you remove the position property from #Guy, you will notice that the image of Galileo will shift drastically. I just want to know why this happens.

:root {
  --initX: 280px;
  --initY: 70px;
  --finalY: 600px;
}

body {
  background-color: aqua;
  padding: 0px;
  margin: 0px;
}

#Guy {
  z-index: 4;
  height: 200px;
  position: fixed;
  width: auto;
  transform: translate(800px, 450px);
}

#Galilo {
  height: 50px;
  width: auto;
  z-index: -1;
  transform: translate(290px, 5px) rotateZ(4deg);
}

#tower {
  height: 650px;
  width: 150px;
  z-index: 0;
  transform: translate(250px, 50px) rotateZ(4deg);
  position: absolute;
  background-color: grey;
}

#Lball {
  height: 40px;
  width: 40px;
  z-index: 2;
  border-radius: 50%;
  transform: translate(var( --initX), var(--initY));
  background-color: blue;
  position: absolute;
  animation: lite 2s linear 1s infinite forwards;
}

#Hball {
  height: 50px;
  width: 50px;
  z-index: 3;
  transform: translate(calc(var( --initX) + 75px), var(--initY));
  border-radius: 50%;
  background-color: red;
  position: absolute;
  animation: heavy 2s linear 1s infinite forwards;
}

#floor {
  height: 25%;
  width: 100%;
  background-color: green;
  position: absolute;
  z-index: -1;
  transform: translate(0px, 565px);
}

#hide {
  height: 12%;
  width: 100%;
  background-color: green;
  position: absolute;
  z-index: 1;
  transform: translate(0px, 650px);
}

@keyframes lite {
  0% {
    transform: translate(var( --initX), var(--initY))
  }
  90% {
    transform: translate(var(--initX), calc(var(--finalY) + 12.5px))
  }
  100% {
    transform: translate(var(--initX), calc(var(--finalY) + 12.5px))
  }
}

@keyframes heavy {
  0% {
    transform: translate(calc(var( --initX) + 75px), var(--initY))
  }
  90% {
    transform: translate(calc(var( --initX) + 75px), var(--finalY))
  }
  100% {
    transform: translate(calc(var( --initX) + 75px), var(--finalY))
  }
}

<div id="tower"></div>
<div id="Hball"></div>
<div id="Lball"></div>
<div id="floor"></div>
<div id="hide"></div>
<img src="stick fidure.png" alt="Dude thinking" id="Guy">
<img src="galileo-galilei.png" alt="gallilo" id="Galilo">

P.S.

The link for the image of Galileo is https://cdn.images.express.co.uk/img/dynamic/109/590x/galileo-galilei-819977.jpg and the stick figure was made in Paint 3D

Solution

position: fixed takes the element out of the document flow and places it in relation to the viewport/window. Usually that also causes this element to overlap other elements. The other elements however will be rearranged in a way like the fixed element wouldn't be there (it's not in the document flow). So adding/removing position: fixed to/from an element will have all these effects on the overall document.