此问题的解决方法是使用以下CSS样式：

:host >>> .ui-datepicker-calendar-container { z-index: 1003 !important; }

这将覆盖PrimeNG样式，并将日期弹出框置于其他元素上方。

以下是完整的组件示例代码，其中包含上述CSS样式：

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

@Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.css'] }) export class MyComponentComponent implements OnInit {

constructor() { }

ngOnInit(): void { }

/* Set z-index to show date picker on top */ ngAfterViewInit(): void { let style = document.createElement('style'); style.type = "text/css"; style.innerHTML = :host >>> .ui-datepicker-calendar-container { z-index: 1003 !important; }; document.getElementsByTagName('head')[0].appendChild(style); }

}

请注意，这里使用了ngAfterViewInit钩子来确保PrimeNG组件已加载。如果在OnInit中使用，则可能会导致找不到DOM元素并发生错误。

此外，为便于理解，可以将CSS样式单独提取到样式文件中。