I am striving to make the blue block and red block scale proportionally with the webpage, while also maintaining their position without any shifting up or down.
As depicted in this gif, the blocks somewhat accomplish what I desire when scaling diagonally, but there is an issue with positioning when scaling either vertically or horizontally.
Below is the HTML code:
<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 code:
.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;
}