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

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>

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>