Div 有叠加层 css class 正在同一个地方创建

Question

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

我的要求是在图表中间显示多个“TOTAL USERS (NUMBER)”。所以我写了一个overlay css class。在覆盖层 class 内，我给出了 position:absolute 。结果，所有 div 都在同一位置彼此重叠创建。

见上图，“TOTAL USER”部分在同一位置被覆盖。

叠加 class 是：

   .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>

Answer 1

这里你使用的是绝对位置。所以当你写 left 属性或 top 属性时，它是从屏幕左侧和屏幕顶部计算的。因此，所有动态创建的 div 都将呈现在同一位置。

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

您还可以在用于生成 chartData[0].values

的对象中添加顶部位置

然后使用对象的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>

Answer 2

当你使用 position:absolute; parent 时需要 position relative.

在下面添加 css.

.child{position:relative;}

Div 有叠加层 css class 正在同一个地方创建

Div having Overlay css class is getting created at the sameplace

html

javascript

css

css-selectors

less