Can't get images to overlay properly while adapting to the size of the viewport

I've been trying to make my site adapt to the size of any screen and I'm having some trouble getting my objects to scale correctly to the size of the screen while also overlaying on eachother. I've found that the fixed positioning is what is messing up with this but i don't know how to make the images overlay eachother properly without doing so

Here is the site: https://dewd.neocities.org/Hubworld

<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  
  body {
  background-image:url('epicbackground2.jpeg');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:100% 100%;
  }
  

  </style>
 
    
    <title>The web site of dewd</title>
    <!-- The style.css file allows you to change the look of your web pages.
         If you include the next line in all your web pages, they will all share the same look.
         This makes it easier to make new pages for your site. -->

    <link href="/hubworld.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body> 
  <link rel="stylesheet" href="hubworld.css">
  

<div class="container">
 <img class="tv" src="/tv.png">
 <div style="height:520px;width:890px;border:1px solid #0096FF;font:16px/26px Georgia, Garamond, Serif;overflow:auto;" class="middlebox">

<img src="/Welcome.png" class="Welcome"> <br>
<div>
<img src="/crt.gif" class="crtfilter">
</div>

</div>
</div>





   
  </body>
</html>



.tv {
 position: fixed;
  text-align: center;
 height: 108%;
  width: 67%;
  top: -28px;
  left: 310px;
  z-index: 99;
  max-width: 100%;
  
pointer-events: none;
 

}



.container {
  position: relative;
  
}
.imtip, .tvframe {
  
  bottom: 0;
  right: 0;
  text-align: center;
}
.middlebox {
  position: fixed;
  text-align: center;
  top: 132px;
  left: 506px;
  z-index: 95;
  background-image: url(/chao.webp);
  background-size: cover;
  
  
  
}

.crtfilter {
  position: fixed;
  text-align: center;
  height: 520px;
  width: 920px;
  top: 132px;
  left: 482px;
  z-index: 97;
  opacity: 0.3;
  pointer-events: none;
  
}

.Welcome {
  height: 100px;
  width: 500px;

  left: 700px;
  text-align: center;
  z-index: 96;
 
}
@media (max-width: 600px) {
  .tv {
     width: 100%;
  }
  .tvframe {
     width: 100%;
  }
  
}
@media (max-width: 601px) {
  .tv {
     width: 100%;
  }
  .tvframe {
     width: 100%;
  }
  
}

I've tried using the meta viewport tag but it seems to conflict with the fixed positioning. I also tried using tried converting the pixel widths and heights to %s to no avail.

Solution

It can be a bit confusing but luckily not a problem, few adjustments needed. Changing fixed to absolute position and a few other tricks to sort sizing in %. There may be lots more to do with it but it's a start.

for simplicity tv-container should make having more containers in the future easier to maintain. For responsiveness you can try the following queries and resize tv-container however you like.

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

.tv-container {
  height: 500px;
  width: 414px;
  position: relative;
}

.tv {
  position: absolute;
  text-align: center;
  height: 100%;
  width: 100%;
  z-index: 99;
  max-width: 100%;
  margin: 0 auto;
  pointer-events: none;
}

.middlebox {
  position: absolute;
  text-align: center;
  top: 16%;
  z-index: 95;
  left: 15%;
  background-image: url(/chao.webp);
  background-size: cover;
  height: 54%;
  width: 69%;
  border: 1px solid #0096FF;
  font: 16px / 26px Georgia, Garamond, Serif;
  overflow: auto;
}

.Welcome {
  width: 100%;
  text-align: center;
}

.crtfilter {
  position: absolute;
  text-align: center;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 97;
  opacity: 0.3;
  pointer-events: none;
}

<div class="tv-container">
  <img class="tv" src="/tv.png">
  <div class="middlebox">

    <img src="/Welcome.png" class="Welcome">
    <img src="/crt.gif" class="crtfilter">

  </div>
</div>