Primeng 18 SplitButton窄屏（<960px）显示异常求助

针对你遇到的PrimeNG 18 SplitButton在屏幕宽度小于960px时，下拉层偏移至右下角且顶部留白的问题，提供以下几种可行的解决办法：

方法1：自定义CSS强制定位 #

通过媒体查询覆盖小屏幕下的默认定位样式，强制下拉层与按钮底部左对齐：

@media (max-width: 959px) {
  /* 修正SplitButton下拉层的定位 */
  .p-splitbutton .p-overlaypanel {
    top: calc(100% + 0px) !important;
    left: 0 !important;
    transform: none !important;
    position: absolute !important;
  }
  
  /* 设置按钮容器为相对定位，让下拉层基于按钮本身定位 */
  .p-splitbutton {
    position: relative;
  }
}

这个方法直接修正CSS定位逻辑，无需修改组件业务代码，是最轻量化的解决方案。

方法2：组件属性配合CSS微调 #

如果单纯CSS不生效，可结合SplitButton的属性优化定位逻辑：

1. 给SplitButton设置 appendTo="self"，让下拉层挂载到按钮自身的容器下
2. 保留上述媒体查询的CSS规则

模板示例：

<p-splitButton appendTo="self" label="操作" [model]="menuItems"></p-splitButton>

方法3：JS手动计算定位（极端场景） #

如果前两种方法无法覆盖所有场景，可通过监听窗口resize事件，手动计算并修正下拉层位置：

import { ViewChild, Component, OnInit, OnDestroy } from '@angular/core';
import { SplitButton } from 'primeng/splitbutton';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit, OnDestroy {
  @ViewChild('targetSplitBtn') targetSplitBtn!: SplitButton;
  resizeListener?: () => void;

  ngOnInit() {
    this.resizeListener = this.adjustOverlayPos.bind(this);
    window.addEventListener('resize', this.resizeListener);
  }

  adjustOverlayPos() {
    if (window.innerWidth <= 959 && this.targetSplitBtn.overlayVisible) {
      const btnRect = this.targetSplitBtn.el.nativeElement.getBoundingClientRect();
      const overlayEl = this.targetSplitBtn.overlay.el.nativeElement;

      overlayEl.style.position = 'fixed';
      overlayEl.style.top = `${btnRect.bottom}px`;
      overlayEl.style.left = `${btnRect.left}px`;
      overlayEl.style.transform = 'none';
    }
  }

  ngOnDestroy() {
    if (this.resizeListener) {
      window.removeEventListener('resize', this.resizeListener);
    }
  }
}

模板中给目标SplitButton添加标识：

<p-splitButton #targetSplitBtn label="按钮" [model]="items"></p-splitButton>

这些方案可确保在任何屏幕尺寸下，SplitButton的下拉层都与按钮底部对齐，不会出现偏移问题。

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