Javascript 正在sameplace创建具有覆盖css类的Div

我想在另一个div中创建一个覆盖div[覆盖div在for循环中动态生成]。但是当我在overlay类中写入position:absolute时，内部div被创建在相同的位置

我的要求是在图表中间显示多个“总用户（号码）”。 因此，我编写了一个覆盖css类。在overlay类中，我给出了

位置：绝对
。因此，所有div都是在相同的位置创建的


如上图所示，“总用户”部分在同一位置被覆盖

覆盖类别为：

   .overlay{
    position:absolute;
    top:22px;
    left:0px;
    bottom:0px;
    right:0px;
    z-index: 2;
}

HTML视频代码：

<div *ngFor="let chart of chartData[0].values" class="child">
            <div class="chart-goal-name">{{goalName}}</div>
            <div class="overlay">TOTAL USERS {{userCount}} </div>
            <div class="chart-holder">
              <nvd3 [options]="donutChartOptions"
                [data]="chart"
                class="top-1">
              </nvd3>
            </div>
            
          </div>


{{goalName}}
用户总数{{userCount}
这里您使用的是绝对位置。因此，当您写入left属性或top属性时，它是从屏幕左侧和屏幕顶部计算的。因此，所有动态创建的div都将呈现在相同的位置

所以基本上你需要给每个元素赋予不同的左值。为此，可以在对象中添加用于交互的左位置值

您还可以在用于生成图表数据[0]的对象中添加顶部位置。值

然后使用对象的top和left值，并在html中设置它，如下所示

 <div *ngFor="let chart of chartData[0].values" class="child">
            <div class="chart-goal-name">{{goalName}}</div>
            <div class="overlay"  [ngStyle]="{'left':chart.left, 'top': chart.top}">TOTAL USERS {{userCount}} </div>
            <div class="chart-holder">
              <nvd3 [options]="donutChartOptions"
                [data]="chart"
                class="top-1">
              </nvd3>
            </div>
            
          </div>


{{goalName}}
用户总数{{userCount}
当您使用
位置时：绝对所需父级
位置
相对

添加以下css

.child{position:relative;}

@克里斯没抓到你。您能详细说明一下.position绝对所需位置相对于父级--将css添加到父级.child{position:relative；}.Perfect。。。这很有效。谢谢@SumitPatelgreat我将此添加为答案。这是CSS 101：我如何修复此问题。我想在每个圆环图中动态显示“总用户数”。我已经通过编写代码示例编辑了答案，您可以使用该示例来解决问题。两个答案都是正确的。两个人都在为我工作。谢谢@minalshah