jQuery UI の Position プラグインについて。jQuery UI の Position プラグインを使うと、要素同士の表示位置関係を、相対的に指定することができる。例えば、Ａという要素の右下に、Ｂという要素の左上を合わせるといったことができる。
実装例（サンプル）
①
②
実装例（サンプル）について
実装例（サンプル）は、①のボックスの右下に、②のボックスの左上を合わせ、30pxだけ重なるように、ボックスを表示させたもの。
実装例（サンプル）のソースコードについては、こちら。
Position プラグイン
読み込み方
読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。
まとめて読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
個別に読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.position.js"></script>
「jquery.ui.core.js」や「jquery.effects.core.js」すらも必要としない。
オプション
- my
表示位置を指定される側の要素のどの箇所を合わせるか指定する。
指定方法： my: '水平位置 垂直位置'
水平位置に指定する値：「left」「center」「right」のいづれか。
垂直位置に指定する値：「top」「center」「bottom」のいづれか。
- at
表示位置の基準となる要素のどの箇所に合わせるかを指定する。
指定方法： at: '水平位置 垂直位置'
水平位置に指定する値：「left」「center」「right」のいづれか。
垂直位置に指定する値：「top」「center」「bottom」のいづれか。
- of
表示位置の基準となる要素を指定する。
- offset
オフセットを、ピクセル単位で設定できる。
- collision
要素が画面に収まらないときの処理方法を指定する。
flip ： 画面の端に合わせる。
fit ： 反対に合わせる。
none ： 処理しないで、そのまま表示。
- using