JavaScript：クリックした要素の直下に、対象の要素を表示させる

簡易的な例ですが、クリックしたボタンのすぐ下にポップアップを開く時などに使う関数は、大体下記のようなパターンです。

function setBounds($this, $target) {
    var bounds = $this.getBoundingClientRect(); // クリックされたthisの座標取得
    var elm = document.getElementById($target); // ターゲット要素取得
    var style = elm.currentStyle || document.defaultView.getComputedStyle(elm, ''); // ターゲット要素のstyle取得
    if (style.display == 'none') { //消えてれば表示させる
        elm.style.display = 'block';
        elm.style.top = bounds.top + $this.offsetHeight + 'px'; //thisの縦幅分下げた縦位置にセット
        elm.style.left = bounds.left+'px'; //thisに左詰めにセット
    } else {
        elm.style.display = 'none'
    }
}

HTMLは下記のように使います。

<a href="javascript:void(0)" onclick="setBounds(this,'pop')">リンク</a>
<div id="pop">ポップアップ</div>

getBoundingClientRect() で座標を取ることを把握すれば、表示位置操作は自由自在です。