私は困惑しています。
ログインボタンをクリックします。ポップアップが表示されるまで待ちます。その位置に注意してください。ログインボタンを再度クリックします。左に移動するのを見てください。(正しい位置) ログインボタンをもう一度クリックします。もう動かないことに注意してください。
私は途方に暮れているので、この奇妙な振る舞いをどのように説明すればよいかさえよくわかりません。note.outerWidth(true) のアラートで、最初の 2 回のログイン クリックで異なる幅が報告されることに気付きましたが、オブジェクトが非表示になることはなく、outerWidth が呼び出される前に幅を設定する必要があります...
jQueryがnote.outerWidth（）を初めて評価するとき、ノートの幅がcssで定義されていない（max-widthのみが定義されている）ため、親の幅（loginForm = 250px ）を取得します。
ブラウザは.append（）の後に新しいノートのコンテンツをレンダリングしますが、その新しい幅は.offset（）の後に計算されます。
コンソールログを参照してください：http：//jsfiddle.net/HighKickX/QSsV6/
max-width + 2 * (padding + border-width)
= 300px + 2 *（5px + 1px）= 312px
もう一度クリックすると、オフセットは250pxではなく312pxに基づいて計算されます。そのため、ノートは別の位置に移動します。
解決策1：「位置：絶対」を削除するhttp://jsfiddle.net/HighKickX/wjeGF/
説明：position：absoluteを設定すると、メモはフローから削除され、loginFormから250pxの幅を継承しなくなります。したがって、その幅は250ピクセルに制限されませんが、最大幅300ピクセル+パディング+ボーダー=312ピクセルに制限されます。position：absoluteを設定しない場合、ノートの幅は継承され、250pxに等しくなります（常に）。
解決策2：デフォルトの幅を設定するhttp://jsfiddle.net/HighKickX/Ex3Bp/