这个问题我之前碰到过好几次，核心原因基本逃不开版本不匹配、样式缺失或者页面布局干扰这几点，给你几个覆盖绝大多数场景的稳妥方案，比临时动态计算位置靠谱多了：

1. 先搞定版本匹配问题 #

你当前的引用存在版本混合的问题：用的是jQuery 3.2.1，但jQuery UI核心库是1.12.1，却想引入1.12.4的Autocomplete组件——不同版本的UI组件混着用很容易出现逻辑冲突，尤其是位置计算这种依赖核心库的功能。

正确做法：

• 只保留一个jQuery版本：jQuery 3.2.1（这是你项目当前在用的，没问题）
• 引入完整且版本匹配的jQuery UI 1.12.4库（不要单独拆Autocomplete组件，直接用官方的完整包），确保UI库和jQuery版本兼容（jQuery UI 1.12.x完全支持jQuery 3.x系列）。

2. 必须引入对应版本的jQuery UI CSS #

很多位置偏移问题都是因为漏了jQuery UI的核心CSS，或者CSS版本和JS不匹配。Autocomplete的下拉菜单定位依赖自带的.ui-autocomplete等样式类，缺失这些样式会导致JS计算出的top/left值完全偏离预期。

操作：
引入和你用的jQuery UI版本一致的CSS文件，这个CSS里包含了下拉菜单的基础定位规则，能和JS的位置计算逻辑配合正常工作。

3. 用组件自带的position配置适配页面布局 #

如果页面里的输入框处在有特殊定位（比如position: relative/absolute）或者变换（比如transform）的容器里，Autocomplete默认的位置计算可能会出错。这时候别自己写动态计算，用组件原生的position选项来调整更可靠：

$("#your-input-id").autocomplete({
  // 其他配置项...
  position: {
    my: "left top", // 下拉菜单的左上角
    at: "left bottom", // 对齐到输入框的左下角
    collision: "flipfit" // 当菜单超出视口时自动调整位置
  }
});

你可以根据自己页面的布局调整my和at的参数（比如改成right top对应输入框的右上角），collision参数还能设置菜单超出视口时的处理逻辑，比如none不调整，flip翻转方向，fit调整位置，这比自己写动态计算更适配各种场景。

4. 排查多jQuery版本冲突 #

如果页面里不小心引入了多个jQuery版本（比如之前的1.12.4和现在的3.2.1共存），会导致$指向混乱，Autocomplete可能会用旧版本的jQuery来计算位置，从而出现偏移。

解决办法：

• 彻底移除多余的jQuery版本，只保留3.2.1
• 如果必须保留多个版本，用jQuery.noConflict()来隔离：

// 保留3.2.1的引用
var $jq3 = jQuery.noConflict(true);
// 用$jq3来初始化Autocomplete
$jq3("#your-input-id").autocomplete({ /* 配置 */ });

为什么不推荐临时动态计算？ #

你用动态设置位置的方式，虽然能暂时解决当前场景的问题，但一旦页面布局变化（比如窗口resize、输入框位置因为内容加载改变），或者后续升级组件版本，很容易再次出现偏移，而且可能和组件本身的位置计算逻辑冲突，引发更难排查的问题。上面的方案都是基于组件原生能力和规范来的，能覆盖绝大多数场景，稳定性高得多。

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