带有z索引的自定义下拉列表不起作用

Question

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

下面是一个非常简单的例子，说明了这一点，它出现在下面或可以用复数形式查看：https://plnkr.co/plunk/pt85B6TvbRRIjjji

非常感谢您的任何建议！

谢谢-Jon

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