例えば、文章中の単語にカーソルを当てるとウィンドウがポップアップして各単語の意味を表示するような UI をブラウザの中で実現しようとする時、そのポップアップウィンドウの位置決めは頭を使う作業になります。単純に単語の上にポップアップさせてしまうとブラウザウィンドウの上部境界近くではポップアップウィンドウの一部が表示されなかったりします。
幸い、この位置決めを簡単に行うことができる jQuery のライブラリが用意されています。jquery.ui.position です。公式サイトのデモで動作を確認することができますが、最初はわかりにくいと思うので、簡単にメモ書きしておきます。
公式ページで最初に表示される Default functionality というデモでは my、at、collition という 3つのパラメータを設定してこのプラグインの動作を確認することができます。先の例で言うと単語のどの位置 (at) にポップアップウィンドウのどの位置 (my) を合わせるかを指定することになります。左上と左上を合わせるならば共に「left - top」にする、といった塩梅です。残った collision はブラウザウィンドウ境界近くでの動作を決めます。collision に flip を指定するとはみ出た時は反対側に、fit を指定するとできるだけ同じ側に表示するようにします。
文章で読むより実際にパラメータを変えて動作を確認した方がわかりやすいと思うので興味があれば是非触ってみてください。デモでは大きさの違う 2つのポップアップウィンドウが表示されており、同じパラメータを与えた時に大きさの違いでどのような動作の差異が発生するかを確認できます。
実際に使う時はこの他に of というパラメータで親要素を指定します。