定位不适用于Javascript

我正在建立一个“自动填充”功能。当用户在输入字段中键入内容时，系统在数据库中找到该字符串时，应在灰色的输入字段中显示该字符串，类似于google曾经/仍然拥有/拥有的字符串。

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

的HTML：

<input id="email_input" type="text">
<input id="autofill" type="text">

CSS：

#email_input{
    background-color: transparent;
    z-index: 100;
}

然后，我autofill通过JS将输入准确定位在哪里email_input。

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，以便每个输入重新定位。如果我查看控制台中两个输入字段的位置，它们的位置都相同。

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

由于某些原因，它仍然看起来：

有人知道答案吗？