position:absoluteでhtmlの構造と関係ない位置にレンダリング

JavascriptでダイアログとかD&Dオブジェクトとか作ってると必ず出てくる CSS属性 「position」。

position:absolute座標で指定した位置に左上を合わせてオブジェクトがレンダリングされます。

ダイアログとかが一番下にタグ書いても画面中央に表示されるのはそれですね。

.chip {
  position:absolute;
  z-index: 999;
  top: 200px;
  left: 200px;
}

ダイアログとかだったら真ん中指定すればいいのであんまり細かいことは気にしなくていいのですが、
Aipoのカレンダーのようにドラッグできるオブジェクトをつくろうとすると
「ここで指定しているtopとleftってどこが起点なのよ？」って事になります。

プレーンなHTMLにいきなりposition:absoluteで指定した場合は通常
ブラウザのページ領域になります。なのでマウスイベント取ってきて
event.pageX, event.pageYの座標と比べてやれば通常は大丈夫です。

が、ページによっては必ずしも一番左上じゃなくなったりします。

position:relativeになっているオブジェクトAの中に
position:absoluteのオブジェクトBを入れると
オブジェクトAのtop, leftがオブジェクトBの座標の起点となります。

position:absoluteの座標を親となるオブジェクトに対して
相対的に指定したい場合は親のオブジェクトに
position:relativeを指定する形になります。

もちろん、その場合はオブジェクトの座標に親のオフセット座標を足した座標を
マウスのページ座標と比較する必要があります。