angular

Question

我知道有很多关于使用 z-index 的帖子，但我似乎找不到能回答我问题的帖子。我正在编写一个自定义下拉组件，需要重叠它下面的元素。

这是一个非常简单的例子来说明这一点，它出现在下面或者可以在 pluker 中查看：https://plnkr.co/plunk/pt85B6TvbRRIjjji

非常感谢任何建议！

谢谢 - 乔恩

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <h3>Custom dropdown - z-index</h3> 
  <div style="position:relative; width:45%;">
      <input type="text" [(ngModel)]="inputString">
      <button (click)="toggleDropdown()">Toggle dropdown</button>
      <div *ngIf="showDropdown" style="z-index: 9999; width:35%; border:1px solid blue;">
          <div *ngFor="let day of days">
              {{day}}
          </div>
      </div>
      <div >
          <p>How can I make the list cover this text when visible?</p>
      </div>
  </div>  
  `
})
export class AppComponent {
  showDropdown:boolean = false; 
  days:string[] = [
    'Monday', 
    'Tuesday', 
    'Wednesday', 
    'Thursday', 
    'Friday', 
    'Saturday', 
    'Sunday'
  ]; 
  inputString:string = this.days[0];
  title = 'z-index with dropdown';
  toggleDropdown() {
    this.showDropdown = !this.showDropdown;    
  }

}

Answer 1

如果要覆盖文本，请使用绝对定位。

<div *ngIf="showDropdown" style="z-index: 10; width:35%; border:1px solid blue; position: absolute; top: 0; left: 0; background-color: white;">
   <div *ngFor="let day of days">
      {{day}}
   </div>
</div>

https://plnkr.co/edit/NuStX5Ojo5uEXPsQ

angular - 带有 z-index 的自定义下拉菜单不起作用

angular - custom dropdown with z-index not working

components

z-index

dropdown