PrimeNG 日历打开 Z 索引错误

【问题标题】：PrimeNG Calendar open Z index errorPrimeNG 日历打开 Z 索引错误
【发布时间】：2019-11-28 21:14:51
【问题描述】：

我正在使用 primeNG 日历，每当日历在输入框下打开时，它都位于所有其他 html 元素的后面。但是当它在输入框上方打开时一切正常。

【问题讨论】：

你能在 StackBlitz 中重现它吗？

【解决方案1】：

我通过在 p-calendar html 元素中使用 appendTo="body" 来修复它。

下面是 html 元素现在的样子：

 <p-calendar appendTo="body" [locale]="dk" placeholder="Inklusion dato" [(ngModel)]="patient.inclusionDate" showButtonBar="true"
      readonlyInput="true" [showIcon]="true"></p-calendar>

【讨论】：

【解决方案2】：

在我的情况下效果很好。只需添加

的内联 CSS

<p-calendar [(ngModel)]="dateTo" [disabledDays]="[0,6]" (onSelect)="doOnSelect($event)" [showIcon]="true" [style]="{'overflow': 'visible', 'z-index': '9999','opacity':'1'}"></p-calendar>

内联只能在 style.css 中工作，而不是在 style.css 中工作。

【讨论】：