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

Question

我有两个div容器，一个作为下拉组件，当点击下拉时，它不会与第二个组件重叠。我正在尝试使用 z-index 和 css position，但它也没有用，请尝试使用 so 的另一个解决方案并使用谷歌搜索但没有找到答案，希望任何人都可以指导这个。这是 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>

Answer 2

根据您的 stackblitz link 行为，我认为您只是不希望在单击下拉菜单时将重叠的 div 向下推。您只需要在下拉列表周围添加一个包装器并将下拉内容的位置设置为绝对位置。我将编辑您的 stackblitz 应用程序 HTML 和 CSS 以显示此内容。

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>

然后我将您的 app.component.css 更新为如下所示

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

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

how to make div overlapped another div using html and css

html

css

z-index

overflow

dropdown