Hello, I am seeking help with an issue in my code.
My problem is as follows:
I have two items and one frame. The frame has a position relative to the two items (children) which have positions set to absolute. Ideally, these children should always remain at the same point inside my frame, but when I resize the window, their positions become different in relation to the frame. How can I ensure that the children always stay in the same position for responsive design? Is this even possible?
Feel free to experiment with changing both the width and height of the window in the provided example: 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>To provide a better understanding of the issue, I have included an actual image of the scenario I am facing:
[![RealCase][1]][1]
All objects are positioned absolutely (Waves, stars, robot, etc.). Each wave should maintain the same position regardless of resizing. It is worth noting that each wave is independent.