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

我有两个

div

容器，一个作为下拉组件，当单击下拉时，它不会与第二个组件重叠。我正在尝试使用

z-index

和

css

position

，但也不起作用，尝试so和Google的另一种解决方案，但没有找到答案，希望任何人都能指导。这是我创造的，我尝试了什么：

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>

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

---

ts

您希望div1的下拉列表与div2重叠，对吗？

.div1 {
  border: 1px solid black;
    z-index: 1;
}

.div2 {
  z-index: 2;
}

有多种方法可以做到这一点，但我能想象的最简单的方法是简单地放一个

位置：绝对
属性，该属性位于下拉分区上

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


下拉列表V

{{card.viewValue}}

{{card.viewValue}}

重叠这个分区
从您的链接行为来看，我认为您只是不希望在单击下拉列表时按下重叠的div。
您只需要在下拉列表周围添加一个包装器，并将下拉列表内容的位置设置为绝对位置。
我将编辑你的
stackblitz
应用程序HTML和CSS来显示这一点

app.component.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>

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

-看看问题和答案。我想这对你有帮助。使用best regardslink，您给出了如何在响应设计上重叠项目的状态，我认为，请更新您的示例而不使用角度，因此它显示了问题。几乎完成，但我想溢出'div2'，我认为使用位置：fixed not suitableuse absolute，这一定是我在键入时犯的错误。让我纠正一下。让我知道这是否是因为z指数。我已经更新了代码并提供了更多的css。试试用那些。