定位不'；我不能使用Javascript

我正在构建一个“自动填充”功能。当用户在输入字段中键入某个内容，系统在数据库中找到该字符串时，它应将该字符串以灰色显示在输入字段中，类似于google过去/现在拥有/拥有的内容

因此，我构建了两个输入字段，其中一个清晰可见：

html:

然后我通过JS将

autofill

输入准确定位在

email\u输入的位置

function positionAutocompleteInput(){
  var top = $('#email_input').position().top;
  var left = $('#email_input').position().left;
  $('#autofill').css({'top':top});
  $('#autofill').css({'left':left});
}
positionAutoFillInput();

我所做的实际工作如下：

function autofill(context){
  var input = $('#email_input').val();
  var replacement = context[0].email;
  replacement = replacement.slice(input.length);
  var display = input + replacement;
  $('#autofill').val(display)
}

我尝试调用
positionAutoFillInput（）
onInput，以便在每次输入时对其进行重新定位。如果我查看控制台中两个输入字段的位置，它们都有相同的位置

两个输入字段具有相同的字体大小和字体系列

出于某种原因，它看起来仍然很不对劲：


有人知道答案吗
 你能用CSS这样定位它们吗？这样就不需要JavaScript来定位它


#自动填充，#电子邮件#输入{
字体大小：20px；
}
#自动填充{
位置：绝对位置；
颜色：#中交；
}
#电子邮件输入{
位置：相对位置；
z指数：1；
背景：透明；
}
测试
我认为这是因为文本缩进了一点，而获取左值和顶值并不能明确地确定文本的起始位置。您是否忘记清除最后一个值？为什么不使用纯css做一些事情，我无法获取值来定位js？一个问题，您是否正在尝试获取电子邮件下拉列表？如果您禁用
自动填充
输入，用户将无法意外地将选项卡插入其中。我猜他们不需要自己修改值。
function positionAutocompleteInput(){
  var top = $('#email_input').position().top;
  var left = $('#email_input').position().left;
  $('#autofill').css({'top':top});
  $('#autofill').css({'left':left});
}
positionAutoFillInput();

function autofill(context){
  var input = $('#email_input').val();
  var replacement = context[0].email;
  replacement = replacement.slice(input.length);
  var display = input + replacement;
  $('#autofill').val(display)
}