Div having Overlay css class is getting created at the sameplace

Question

I want to create an overlay div inside another div[The overlay div is generated dynamically inside a for loop]. But when I write position:absolute inside my overlay class, the inner div is getting created at same position.

My requirement is to show multiple "TOTAL USERS (NUMBER)" in the middle of the chart. So I have written an overlay css class. Inside the overlay class I have given position:absolute . As a result all the divs are getting created at same place over each other.

See at the above image the "TOTAL USER" part is overwritten at same place.

overlay class is:

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

HTML vide code:

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

position absolute required position relative to parent -- add css to parent .child{position:relative;}. — Sumit Patel, Jul 17 '20 at 08:08
This is CSS 101: https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_Block — , Jul 17 '20 at 08:17
Does this answer your question? [Position Absolute and Bottom 0](https://stackoverflow.com/questions/19612951/position-absolute-and-bottom-0) — , Jul 17 '20 at 08:18

Minal Shah · Answer 1 · 2020-07-17T08:12:55.523

Here you are using the absolute position. So when you write left property or top property it is calculated from the screen left and screen top. So all the div created dynamically would be rendered in the same position.

So basically you need to give different left value for each. For this you can add the value of the left position in the object that is used for interation.

You can also add the top position in the object used for generating the chartData[0].values

and then use the value of top and left from the object and set it in the html as shown below.

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

How can I fix this. I want to show "TOTAL USERS count" inside each donut chart dynamically. — sandeep, Jul 17 '20 at 08:08
I have edited the answer by writing the code sample that you can use to resolve the issue. — Minal Shah, Jul 17 '20 at 08:13
Both the answers are correct. Both are working for me. Thanks @minalshah — sandeep, Jul 17 '20 at 08:16

score 1 · Accepted Answer · answered Jul 17 '20 at 08:15

1

When ever you use position:absolute; parent required position relative.

add below css.

.child{position:relative;}

answered Jul 17 '20 at 08:15

Sumit Patel

4,530
1
10
28

Div having Overlay css class is getting created at the sameplace

2 Answers2