To translate (maintain the positions of) child divs wrt to the size of the parent div

问题

I have a parent div containing child divs (child divs having transform property), so I save this whole HTML content and then render it again in a different page. On rendering the content in different page the size of the parent div is enlarged, so the issue is the translate values remain same. How can I make the translate positions of the child divs relative to the parent div.

I had referred to some Stack Overflow answers.

From Stack Overflow answers, what I understood is if divs will not help then svg and g svg element might help; I am open to changing the structure of the html content.

The HTML content which I would save and render in other screen

<div _ngcontent-c5="" appdropzone="" appmovablearea="" class="dropzone" 
   id="toget" ng-reflect-ng-style="[object Object]"
   style="width: 100%;
    background-image: url(&quot;data:image/jpeg;base64,/9j/9H/==&quot;); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%; 
    border: 1px solid black;
    height: 340px;">

    <!--bindings={
    "ng-reflect-ng-for-of": ""
     }-->

        <div _ngcontent-c5="" appmovable="" class="box draggable movable 
           ng-star-inserted" ng-reflect-ng-style="[object Object]" 
           touch-action="none" style="transform: translateX(176.8%) 
           translateY(156%);">  mno
        </div>

         <div _ngcontent-c5="" appmovable="" class="box draggable movable 
            ng-star-inserted" ng-reflect-ng-style="[object Object]"
            touch-action="none" style="transform: translateX(276%) 
            translateY(180.8%);">  pqr
         </div>

         <div _ngcontent-c5="" appmovable="" class="box draggable movable 
            ng-star-inserted" ng-reflect-ng-style="[object Object]"
            touch-action="none" style="transform: translateX(361.6%) 
            translateY(62.4%);">  beit
         </div>

     <!--bindings={
     "ng-reflect-ng-for-of": ""
     }-->

 </div>

Additional CSS

On parent

.dropzone {
 padding: 20px;
 margin: 20px 0;
 background: lightgray;
 min-height: 200px;
}

On child

.box {
 background: #BADA55;
 border: 1px solid black;
 padding: 10px 20px;
 display: inline-block;
 }

And rest styles are inline in the above html code

I checked the transform property in dom it remains same whether I increase or decrease the size of the parent div. The positions of the child elements should change wrt to parent container size [Note I also know the parent size container when it will be rendered in different page]

  ______________________         ______________________________________
 |           _______    |        | after being enlarged            ___|__     
 |           |     |    |        |                                |      |                   
 |           |_____|    |        |                                |______|
 |                      |        |                                    |
 |                      |        |                                    |
 |______________________|        |____________________________________|

So the position of the child div got changed when the parent div got enlarged.

来源：https://stackoverflow.com/questions/57449147/to-translate-maintain-the-positions-of-child-divs-wrt-to-the-size-of-the-paren