Elements with position: absolute, when scaled, are positioned relative to the window and fly apart. Why and how to fix?

Question

css

example

<div class="parent">
  		<div class="child"></div>
  <div class="child"></div>
  </div>

.parent{
  	position: relative;
}
/*блок слева сверху:*/
.child{
  	position: absolute;
  top: 0;
  	left: 0;
}
/* блок справа сверху:*/
.child:last-child{
  	right: 0;
  	left: auto;
}

(in order not to confuse you, here I didn’t assign widths, heights, backgrounds, etc. to the elements)
When you change the scale in the browser, the elements begin to be positioned relative to the window
While writing, I caught up with what it seems because with "width: 100%" or "display: block" - the block occupies 100% of the window. WINDOW.
I thought maybe the parent with "pos: relative" would fix it, but figs
I need them to stand in their places, but the parent should a priori be with a non-fixed width (width: 100%)
Is there a solution?

Answer 1

Use another div . The one with 100% width is the parent. Inside it is a div with margin: 0 auto; with a fixed width, and it already has your absolute childrens . Hope I figured out the problem.

Answer 2

Set the value for absolutely positioned elements not in absolute values ​​(px), but in relative values ​​(%, em).
So, left: 345px with a layout width of 1000px would be: (345/1000)*100% = 34.5%

Answer 3

Why do you need an absolute? What prevents to make a float, and set the width of the blocks as a percentage?

Answer 4

Absolute elements are always positioned relative to the first parent with position. Check that when scaling, its borders are where expected.
Your jsfillde example works great: jsfiddle.net/jaro5bxp