如何为PrimeNG下拉框设置z-index以避免被表格footer遮挡

• 直接给下拉框加appendTo="body"属性，把下拉面板挂载到body上，彻底避开表格的层级限制：

  <p-dropdown appendTo="body" [options]="yourOptions" [(ngModel)]="selectedValue"></p-dropdown>
  

  这个方法最省心，基本能直接搞定问题。

• 要是不想改组件属性，就调整全局样式的z-index：
  把下面代码加到全局的styles.css/scss里，确保下拉面板的层级比表格页脚高：

  .p-dropdown-panel {
    z-index: 10000 !important;
  }
  .p-datatable-footer {
    z-index: 1;
  }
  

  要是想在组件内写样式，得加::ng-deep突破Angular的样式隔离：

  ::ng-deep .p-dropdown-panel {
    z-index: 10000 !important;
  }
  

• 还有可能是表格容器设了overflow: hidden把下拉框裁剪了，检查下父容器样式，改成overflow: visible即可：

  .your-table-container {
    overflow: visible !important;
  }
  

亲测第一种方法最管用，毕竟直接跳出了表格的容器限制，不会再有层级冲突。

内容的提问来源于stack exchange，提问作者Phil Huhn