.offset() lỗi với vị trí tuyệt đối?

Question

CSS:

.flyoutdialog 
{ 
    position: absolute; 
    top:0; 
    left:0; 
    border: 1px solid #CCC; 
    background-color: white; 
    width: 250px; 
    padding: 10px 10px 10px 10px; 
} 

Các jQuery: ("flyoutdialog "hộp thoại là 1 item của $(), nút là 1 item của $()" flyouticon.")

var offset = button.offset(); 
    alert("top: " + offset.top + " left: " + offset.left); 
    // dialog.offset({ top: offset.top - 5, left: offset.left + 25 }); 
    dialog.css("top", offset.top - 5 + "px"); 
    dialog.css("left", offset.left + 25 + "px"); 

    dialog.show("blind", { direction: "horizontal" }, 1000); 

    var off2 = dialog.offset(); 
    alert("top: " + off2.top + " left: " + off2.left); 

HTML:

<div class="editor-label"> 
     <label for="Gebruikerscode">Gebruikerscode</label> 
    </div> 
    <div class="editor-field"> 
     <input id="gebruikerscode" name="gebruikerscode" type="text" value="" /> 
<a href="#" class="flyouticon"> 
    <img src="/img/help.png" alt="Flyout" width="16" /></a> 

<div class="flyoutdialog grayicon" title="Gebruikerscode"> 
    <div class="title"> 
     <h4> 
      Gebruikerscode</h4> 
     <span class="closedialog ui-icon ui-icon-closethick">&nbsp;</span> 
    </div> 
    <p> 
     Dit is de code of 'gebruikersnaam' waarmee de school inlogt. Deze is uniek.</p> 

</div> 

</div> 

Tình hình:

Tôi có một biểu tượng .flyouticon đó, khi được quét hoặc nhấp nên mở .flyoutdialog hộp thoại nên đến ngay bên cạnh nó. để làm điều đó, tôi nghĩ tôi muốn sử dụng mã này. Mã này HOẠT ĐỘNG, nhưng chỉ (!!!!) khi tôi không cuộn xuống hoặc sang phải.

Khi KHÔNG cuộn:

var offset = button.offset(); 
    alert("top: " + offset.top + " left: " + offset.left); //top: 375 left: 288.29998779296875 
    dialog.offset({ top: offset.top - 5, left: offset.left + 25 }); 
    dialog.show("blind", { direction: "horizontal" }, 1000); 
    var off2 = dialog.offset(); 
    alert("top: " + off2.top + " left: " + off2.left); //top: 370 left: 313.29998779296875 

làm việc hoàn hảo. nhưng, WHEN đã cuộn:

var offset = button.offset(); 
    alert("top: " + offset.top + " left: " + offset.left); //top: 375 left: 288.29998779296875 
    dialog.offset({ top: offset.top - 5, left: offset.left + 25 }); 
    dialog.show("blind", { direction: "horizontal" }, 1000); 
    var off2 = dialog.offset(); 
    alert("top: " + off2.top + " left: " + off2.left); //**top: 142** left: 313.29998779296875 

TOP trở nên nhỏ hơn ... tại sao điều này xảy ra khi tôi cuộn ??

Cách khắc phục:

var offset = button.offset(); 
    alert("top: " + offset.top + " left: " + offset.left); 
    //dialog.offset({ top: offset.top - 5, left: offset.left + 25 }); 

    dialog.css("top", offset.top - 5 + "px"); 
    dialog.css("left", offset.left + 25 + "px"); 

    dialog.show("blind", { direction: "horizontal" }, 1000); 
    var off2 = dialog.offset(); 
    alert("top: " + off2.top + " left: " + off2.left); 

Các Câu hỏi:

tại sao offset() không hoạt động chính xác ở đây? Tôi đang sử dụng Firefox nhưng tôi đoán điều đó không quan trọng. (Edit: trong IE8 giống nhau. Do đó, nó không phải là trình duyệt) Tại sao tôi phải sử dụng các thuộc tính CSS cá nhân khi hộp thoại được định vị tuyệt đối? và tại sao nó đi lên khi tôi di chuyển xuống? tại sao 'TOP' lại nhỏ hơn? khi tôi đã đặt nó với giá trị cần thiết. đây có phải là lỗi trong setter của offset() không?

Chỉnh sửa:

tốt,

dialog.offset({ top: offset.top + $(window).scrollTop() - 5, left: offset.left + 25 }); 

dường như làm việc. Nhưng điều này không trả lời câu hỏi của tôi TẠI SAO? Tại sao bù trừ tự động khấu trừ giá trị scrollTop() từ giá trị top trong setter? điều này không có ý nghĩa!

Answer 1

offset sẽ không hoạt động như bạn mong đợi khi cuộn. bạn cần phải thêm $(window).scrollTop() vào đó