.offset（）绝对位置的bug？

Question

的CSS：

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

jQuery的：（ “flyoutdialog ”对话框的$（1项），按钮的$（1项）“ 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> 

现状：

我有一个图标.flyouticon其中，徘徊或点击要打开.flyoutdialog 对话框应该来紧挨着它的时候。要做到这一点，我想我会使用这个代码。此代码有效，但只有（!!!!）当我不向下滚动或向右滚动时。

当不滚动：

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 

工作完美。但是，当滚动时：

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变小了......为什么当我滚动时会发生这种情况？

解决方法：

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); 

问题：

为什么offset()无法正常工作吗？我使用Firefox，但我想这没关系。 （编辑：在IE8中是一样的，所以它不是浏览器）为什么我必须使用单独的CSS属性，无论如何绝对定位对话框？为什么当我向下滚动时它会上升？为什么'TOP'变小？当我刚刚设置它应该是它的价值。这是一个在offset()二传手的错误？

编辑：

好，

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

似乎工作。但是这不回答我的问题为什么？为什么抵消自动扣除设置者中top值的scrollTop()值？这没有道理！

Answer 1

当您滚动时，偏移将无法正常工作。你需要添加$(window).scrollTop()到它