Css divs get placed in front of another when aboslute - html

Question

I have a *ngfor that makes divs, but when i make the divs aboslute, the divs get place all at the same place instead of a list.
I need to make the divs aboslute to change the content inside of them with relative css.
html:
<ion-grid >
<div *ngFor="let card of restPointsCards;let i=index" id="card">
<ion-row>
<ion-col >
<ion-img *ngIf="userPercentageCards[i]>= 100" src="../../../assets/icons/PointsCard_100.png" ></ion-img>
<ion-img *ngIf="userPercentageCards[i]>= 85 && userPercentageCards[i] <100" src="../../../assets/icons/PointsCard_85.png"></ion-img>
<ion-img *ngIf="userPercentageCards[i]>= 70 && userPercentageCards[i]< 85" src="../../../assets/icons/PointsCard_70.png" ></ion-img>
<ion-img *ngIf="userPercentageCards[i]>= 50 && userPercentageCards[i]< 70" src="../../../assets/icons/PointsCard_50.png" ></ion-img>
<ion-img *ngIf="userPercentageCards[i]>= 30 && userPercentageCards[i]< 50" src="../../../assets/icons/PointsCard_30.png" ></ion-img>
<ion-img *ngIf="userPercentageCards[i]>= 15 && userPercentageCards[i]< 30" src="../../../assets/icons/PointsCard_15.png" ></ion-img>
<ion-img *ngIf="userPercentageCards[i]< 15 && userPercentageCards[i]> 0" src="../../../assets/icons/PointsCard.png"></ion-img>
</ion-col>
<ion-col >
<ion-text> {{card.cardPoints}} = {{card.cardValue}} € </ion-text>
<!-- <ion-text>{{userPercentageCards[i]}} %</ion-text>-->
<ion-button id="useButton" *ngIf="userPercentageCards[i] >=100" style="bottom: 0"> Usar Cartão!</ion-button>
</ion-col>
</ion-row>
</div>
css:
#card{
position: absolute;
border: #5e8d93 2px solid ;
margin-top: 5px;
height: 140px;
width: 70%
}
I want to change the position of the images and buttons inside the div thats why i want to make the div aboslute, so i can change for exemple the button like this:
css:
#useButton{
position: relative;
bottom: 5px;
}

Answer 1

that is exactly what position: absolute does, it places an element at an absolute position that is relative to the body or another parent with position: relative. In this case using position absolute is bound to place them in the same area of the div.

Answer 2

I have No Idea why you would be using Position:absolute elements but Let's assume there are no other conflicts. wrap the #card container with a div/span and give it a class="relative" You can wrap any absolute elements, this will allow the absolute element to exist as a static element and continue with the flow BUT they are unpredictable.
add this css class to the document
.relative{
position: relative;
display: inline-block;
width:100%;
height:100%;
}
you can name the class whatever you want, But caution: absolute behaviour depends on whatever elements and styles, assuming there are not other styles involved this should list the elements underneath each other with the exception of overflow elements.
For whatever Reason I would not recommend absolute elements as they always disrupt the flow of the HTML so unless you ABSOLUTELY have to. consider using the above css to allow the elements to not overlap.
If you want a more effective solution consider using Pastebin or Codepen than we can help get the desired effect intended without rellying on absolute elements.