html - 如何使用html和css使div与另一个div重叠

Question

我有两个 div 容器，一个作为下拉组件，当下拉菜单被点击时，它不会与第二个组件重叠。我正在尝试使用 z-index 和 css position，但它也没有用，因此尝试了另一种解决方案并谷歌搜索但没有找到答案，希望任何人都可以指导这一点。这是stackblitz我创造了，我尝试了什么:

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

您希望 div1 的下拉菜单与 div2 重叠吗？有多种方法可以做到这一点，但我能想到的最简单的方法就是简单地放置一个 position: absolute;下拉 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>