Как предотвратить изменение положения элементов с абсолютной позицией при изменении размера ⇐ CSS

[Anonymous]

Привет, у меня вопрос по поводу моего кода.
Вот моя проблема.
У меня есть два элемента и один фрейм. Фрейм имеет позицию относительно, а два элемента (дочерние элементы) имеют абсолютную позицию. Они должны всегда находиться в одной и той же точке внутри моего кадра, но когда я изменяю размер, положение детей меняется в зависимости от кадра. Как заставить детей всегда оставаться в одной и той же позиции для адаптивного дизайна? Возможно ли это?
Попробуйте также изменить высоту окна в примере (не только ширину)
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;
}

Код: Выделить всё

Я публикую здесь свой реальный пример изображения, чтобы лучше представить, в чем проблема.
[![RealCase][1]][1]
Все объекты позиционируются абсолютно (волны, звезды, робот и т. д.) Каждая волна должна в каждой ситуации изменения размера находиться в одном и том же положении. Полезно знать, что каждая волна создается отдельно.

Подробнее здесь: https://stackoverflow.com/questions/655 ... n-resizing