Notification通知组件定位到顶部居中后为什么会偏移？

凌薇 Dev 提问于 2026-02-19 01:51:24 阅读 35

组件

我用Ant Design的Notification组件时，想把它定位在页面顶部正中间。按照文档设置了placement="top"，然后在全局CSS里加了


.ant-notification-top {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

结果通知框虽然横向居中了，但垂直方向却贴在了浏览器可视区顶部，距离页面内容区域顶部还有滚动条的宽度差。尝试过加position: fixed和调整top值都不管用，这是为什么呢？

我来解答赞 7 收藏

反馈

1 条解答

闲人文华 Lv1

你这个问题是因为 top 的值没处理好，浏览器的滚动条会影响定位。我之前这样搞的，直接在全局样式里加个具体的 top 值，比如：

.ant-notification-top {

  left: 50% !important;

  transform: translateX(-50%) !important;

  top: 24px !important; /* 根据需要调整这个值 */

  position: fixed !important;

}

如果还是有问题，检查一下是不是有其他样式干扰了 .ant-notification-top，用浏览器调试工具看看最终计算出来的样式。

2026-02-19 02:02