CSS image overlap positioning

Question

What I am specifically looking to do, is have the blue block and red block scale with the webpage, but also remain in place without shifting up and down like they are now.

Here is a gif demonstrating that it does what I want somewhat when scaling diagonally, but scaling either vertically or horizontally results in off positioning.

Imgur link to demo gif

Here is the HTML

<div class="blockDisplay">
    <center><img src="greenBlock.png" class="greenBlock">
    <img src="redBlock.png" class="redBlock">
    <img src="blueBlock.png" class="blueBlock"></center>
</div>

Here is the CSS

.blockDisplay {
      background-color: #444;
      overflow: hidden;
}
.greenBlock {
      position: relative;
      width: 58%;
      z-index: 2;
}
.redBlock {
      position: absolute;
      top: 6%;
      left: 66%;
      width: 8vw;
      z-index: 4;
}
.blueBlock {
      position: absolute;
      top: 40vh;
      left: 77%;
      width: 23vw;
}

Answer 1

Then here it as as an answer

.blockDisplay {
      background-color: #444;
      overflow: hidden;
      position: relative;
}
.greenBlock {
      width: 58%;
      z-index: 2;
}
.redBlock {
      position: absolute;
      top: 6%;
      left: 66%;
      width: 8vw;
      z-index: 4;
}
.blueBlock {
      position: absolute;
      top: 40vh;
      left: 77%;
      width: 23vw;
}

<div class="blockDisplay">
  <center>
    <img src="greenBlock.png" class="greenBlock">
    <img src="redBlock.png" class="redBlock">
    <img src="blueBlock.png" class="blueBlock">
  </center>
</div>