how to make div overlapped another div using html and css

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>