EmojiPicker 弹出位置总是错位怎么办?

小泉润 阅读 36

我在用一个第三方的 EmojiPicker 组件,点击按钮后表情面板老是跑到页面左上角去了,根本不在输入框下面。明明设置了 position: absolute,但就是不对。

我试过给父容器加 position: relative,也检查了 z-index,还是没用。这是我的相关样式:

.emoji-picker {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
}
.input-container {
  position: relative;
  display: inline-block;
}

难道是组件内部用了 portal 挂载到 body 了?那该怎么控制它的定位啊?

我来解答 赞 4 收藏
二维码
手机扫码查看
1 条解答
端木向景
对,基本就是portal挂到body导致的,不受你父容器控制了。

看下组件有没有 getPopupContainerportal 这类prop,指向你的input-container节点:

<EmojiPicker getPopupContainer={() => document.querySelector('.input-container')} />


或者如果组件支持,直接把定位改成 fixed 自己算偏移量。
点赞
2026-03-17 20:04