Primeng colorpicker面板被截断，如何实现弹窗正常弹出不被遮挡？

修复方案 #

方案1：修正appendTo属性写法+调整z-index（优先推荐） #

你之前配置appendTo=body失效大概率是属性写法错误，Primeng的输入属性需要用方括号绑定，正确的组件用法如下：

<p-colorPicker 
  id="colorpicker" 
  [inline]="false" 
  [ngModel]="color" 
  (onChange)="changeColor($event)"
  [appendTo]="'body'"
  [autoZIndex]="true"
  [baseZIndex]="10000"
></p-colorPicker>

参数说明：

• [appendTo]="'body'"：将弹出面板直接挂载到body节点下，脱离侧边栏父容器的溢出裁剪规则
• [autoZIndex]="true"：开启组件自动管理z-index层级
• [baseZIndex]="10000"：设置面板的基础层级，保证高于Angular Material sidenav的默认z-index（默认值为1000）

如果还是存在层级问题，在全局样式文件（通常为styles.css/styles.scss）中添加以下样式强制提升面板层级：

.p-colorpicker-panel {
  z-index: 99999 !important;
}

方案2：修改侧边栏容器溢出规则（适用于侧边栏内容不需要滚动的场景） #

找到你项目中对应mat-sidenav容器的样式，修改溢出属性关闭裁剪：

.mat-sidenav {
  overflow: visible !important;
}
/* 如果是sidenav内的内容容器单独加了overflow规则，对应修改即可 */
.mat-sidenav-content {
  overflow: visible !important;
}

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