how to make div overlapped another div using html and css - html

Question

I have two div container, one act as dropdown component, when dropdown clicked, it will not overlapped second component. I am trying using z-index and css position, also it didnt work, try another solution from so and googling but not found the answer, hope anyone can guide this. this is stackblitz I created, what have I tried:
html
<div>
<div class="div1" (click)="selectSavedCard()">
<div *ngIf='!hasSelected'>
<div>
<p>dropdown V</p>
</div>
</div>
<div *ngFor="let card of savedCards">
<div>
<p>{{card.viewValue}}</p>
</div>
</div>
</div>
<div *ngIf="show">
<div *ngFor="let card of savedCreditCards" (click)="selectDropdownCard(card)">
<div>
<p>{{card.viewValue}}</p>
</div>
</div>
</div>
<div class="div2">overlapped this div</div>
</div>
css
.div1 {
border: 1px solid black;
z-index: 1;
}
.div2 {
z-index: 2;
}
ts

Answer 1

You want the dropdown of div1 to overlap the div2 right?
There are multiple ways to do this, but the simplest one i can imagine is to simply put a position: absolute;
property on the dropdown div.
<div>
<div class="div1" (click)="selectSavedCard()" [(ngModel)]="selectedCard" ngDefaultControl>
<div *ngIf='!hasSelected'>
<div>
<p>dropdown V</p>
</div>
</div>
<div style="position: absolute;z-index: 100;background: #aaa;width: 100%;" *ngFor="let card of savedCards">
<div>
<p>{{card.viewValue}}</p>
</div>
</div>
</div>
<div style="position: absolute;z-index: 100;background: #aaa;width: 100%;" *ngIf="show">
<div *ngFor="let card of savedCreditCards" (click)="selectDropdownCard(card)">
<div>
<p>{{card.viewValue}}</p>
</div>
</div>
</div>
<div class="div2">overlapped this div</div>
</div>

Answer 2

From your stackblitz link behavior I think you just don't want the overlapped div to be pushed down when the dropdown is clicked.
You just need to add a wrapper around your dropdown and set the position of the dropdown content to be absolute.
I will edit your stackblitz app HTML and CSS to show this.
app.component.html
<hello name="{{ name }}"></hello>
<div class="container-div">
<div class="wrapp-dropdown">
<div class="div1" (click)="selectSavedCard()" [(ngModel)]="selectedCard" ngDefaultControl>
<div *ngIf='!hasSelected'>
<div>
<p>dropdown V</p>
</div>
</div>
<div *ngFor="let card of savedCards" class="dropdown-content">
<div>
<p>{{card.viewValue}}</p>
</div>
</div>
</div>
<div *ngIf="show" class="dropdown-content">
<div *ngFor="let card of savedCreditCards" (click)="selectDropdownCard(card)">
<div>
<p>{{card.viewValue}}</p>
</div>
</div>
</div>
</div>
<div class="div2">overlapped this div</div>
Then I updated your app.component.css to look like this
p {
font-family: Lato;
}
.container-div {
position: relative;
}
.div1 {
border: 1px solid black;
z-index: 3;
position: relative;
}
.wrap-dropdown {
position: relative;
}
.dropdown-content {
position: absolute;
}
b.div2 {
z-index: 2;
}