もはや定番的な内容ですが、マウスイベントの処理との兼ね合いで要素の絶対座標が必要になることがあります。
Element.offsetLeft, Element.offsetTopを使うのが定石ですが、CSSのposition属性の値によってその意味が異なるため、対応に苦慮しがちです。
それは実は誤解であって、offsetLeft/offsetTopの値はoffsetParentの左上からの相対座標なのです。
ですから、positionが何であってもoffsetParentをたどってoffsetLeft/offsetTopを積算していけば絶対座標は取得可能です。
そして、座標を指定して要素を配置するときも同様にoffsetParentからの相対座標を指定すればよいのです。CSSだけでやろうとすると、offsetParentが状況によって変化するため、面倒なことになりがちですが、JavaScript内では場合わけが必要なくなるので、実は簡単な話なのです。
function(node) {
var style = node.currentStyle || window.getComputedStyle(node);
var result = {
width : node.offsetWidth, height : node.offsetHeight,
left : 0, top : 0,
right : node.offsetWidth, bottom : node.offsetHeight,
borderTop : parseInt(style.borderTopWidth),
borderRight : parseInt(style.borderRightWidth),
borderBottom : parseInt(style.borderBottomWidth),
borderLeft : parseInt(style.borderLeftWidth),
paddingTop : parseInt(style.paddingTop),
paddingRight : parseInt(style.paddingRight),
paddingBottom : parseInt(style.paddingBottom),
paddingLeft : parseInt(style.paddingLeft)
};
var parent = node;
while (parent) {
result.left += parent.offsetLeft;
result.top += parent.offsetTop;
parent = parent.offsetParent;
}
if (document.all && document.compatMode == 'BackCompat') { //IE compat
result.right += result.left;
result.bottom += result.top;
} else {
result.right += result.left - result.borderLeft - result.borderRight;
result.bottom += result.top - result.borderTop - result.borderBottom;
}
return result;
}
