To maintain position of child divs wrt to parent b

2019-08-17 02:26发布

问题:

I have parent div having a background image and inside this parent, it has child divs. When the parent div is displayed in smaller size say width 50% then I place the divs using top and left the property at the exact same position I would like to. Till here everything worked as expected now when I try to display the parent div with 100% width, the background image obviously also fills up the parent div now the issue is the child elements do not move wrt to the background image. I guess transform could be the solution but don't know-how and moreover, I also want to scale the child divs wrt to the parent that also transform provides scale but don't know how to use.

I have tried giving position relative and using top and left positions, they place the child divs in expected positions but when size changes of the parent div they do not maintain their pos wrt to the background image

<div id="parent" class="dropzone" [ngStyle]=" 
      {'width':'40%','background-image': 'url('+abcurl+')',
       'background-repeat': 'no-repeat', 'background-position': 'center', 
       'background-size': '100% 100%', 'border':'1px solid black', 
       'height':'340px', 'position': 'relative'}">

  <div id= "child" class="box" 
       *ngFor="let existingZone of floor.droppeditem"
       [ngStyle]="{'position':'absolute', 'top.px': existingZone.spans[1], 
                 'left.px': existingZone.spans[0]}">
    {{ existingZone.main }}
  </div>

 </div>

CSS

parent ngStyle displayed under Styles and class

element.style {
 width: 1353px;
 background-image: url(abcurl)
 background-repeat: no-repeat;
 background-position: center center;
 background-size: 100% 100%;
 border: 1px solid black;
 height: 340px;
 position: absolute;
}

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

child ngStyle displayed under Styles and class

element.style {
 position: relative;
 top: 92px;
 left: 194px;
}

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