保持意見箱總是直接在文本框下

Question

我有一個文本輸入帶有一個建議框，當輸入內容時，它出現在輸入下。問題是當頁面縮放時，有時框會出現在稍微不同的位置（1-3像素）。有沒有一種方法可以保證，無論頁面比例是多少，建議框始終保持相對於輸入字段底部的0px左側和0px頂部？謝謝。

tBox = $('#textBox')[0]; 

$('#suggestionBox').css({ 
    width: "151px", 
    border: "1px solid grey", 
    position: "absolute", 
    top: (tBox.offsetTop + tBox.offsetHeight) + "px", 
    left: tBox.offsetLeft + "px" 
}); 

<input type="text" id="textBox" /> 
<div id="suggestionBox" style="display:none;">suggesion</div> 

Answer 1

您是否試過使用這款http://docs.jquery.com/UI/API/1.8/Position？

http://jsfiddle.net/ZpFm9/1/

$("#suggestionBox").position({ 
    my: "left top", 
    at: "left bottom", 
    of: $('#textBox') 
}); 

Answer 2

看到簡單的例子：http://jsfiddle.net/JQeTT/

$('#suggestionBox').css({ 
    width: "151px", 
    border: "1px solid grey", 
    position: "absolute", 
    top: ($('#textBox').offsetTop + $('#textBox').offsetHeight) + "px", 
    left: $('#textBox').offsetLeft + "px" 
}); 

$('#textBox').focus(function(){ 

    $("#suggestionBox").show(); 
}).blur(function(){ //if lost the focus, the suggestion box hide again 
    $("#suggestionBox").hide(); 
});