How to prevent changing position of items with position absolute when resizing - html

Question

Hi I have a question about my code.
Here is my problem.
I have two items and one frame. Frame has position relative a two items (children) have position absolute. They should be always on the same point inside my frame but when I am resizing the position of children are different in relation with frame. How to make the children always stay on same position for responzive design? Is it possible?
Try to change height of window in example too (not only width)
https://codesandbox.io/s/adoring-jackson-c6fth?file=/index.html:0-900
.frame {
width: 70vh;
height: 90vh;
border: 10px solid red;
margin: 10px auto;
position: relative;
}
.objA {
width: 130%;
position: absolute;
height: 40%;
bottom: -10%;
left: -20;
border: 2px solid green;
background: rgba(10, 101, 10, 0.7);
z-index: 2;
}
.objB {
width: 10%;
position: absolute;
height: 20%;
bottom: 20%;
left: 30%;
background: red;
z-index: 1;
}
<div class="frame"></div>
<div class="objA"></div>
<div class="objB"></div>
I post here my real example image for better imagination what the problem is.
All objects are positioned absolute (Waves, stars, robot etc...) Each wave should in every resized situation be in same position. Good to know is that every wave is separatly.

Answer 1

Make sure the positions and heights/widths are all in percents and most important: place your items inside the main <div class="frame"></div> element. You can start this way:
* {
box-sizing: border-box;
}
body {
background: none #014653;
margin: 0;
}
.frame {
width: 70vw;
height: 90vh;
border: 10px solid #5cb9b8;
background: none #5cb9b8;
margin: 5vh auto;
position: relative;
border-radius: 6px;
}
.frame-stage {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #a2cece;
background: none #014653;
border-radius: 5px;
}
.objA {
width: 10%;
position: absolute;
height: 20%;
bottom: 10%;
left: -20;
border: 2px solid green;
background: rgba(10, 101, 10, 0.7);
z-index: 2;
}
.objB {
width: 10%;
position: absolute;
height: 20%;
bottom: 30%;
left: 30%;
background: red;
z-index: 1;
}
<div class="frame">
<div class="frame-stage">
<div class="objA"></div>
<div class="objB"></div>
</div>
</div>
Updated codesandbox here.