.offset () ошибка с абсолютной позицией?

CSS:

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

jQuery: (диалог - это 1 элемент из $ (". Flyoutdialog"), кнопка - 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

ВЕРХ стал меньше ... почему это происходит, когда я прокручиваю ??

Исправление:

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

похоже работает. Но это не отвечает на мой вопрос ПОЧЕМУ? Почему смещение автоматически вычитает значение scrollTop () из значения top в сеттере? это не имеет смысла!