JavaScriptで要素の絶対座標を取得する方法

JavaScriptで要素の絶対座標を取得するには、getBoundingClientRectメソッドを、jQueryではoffsetを使えばよい。
JavaScriptでgetBoundingClientRectメソッドを使った例

<div id="main_box">
 <div id="sub_box">
  <div id="myBox"></div>
 </div>
</div>
<script type="text/javascript">
  var ele = document.querySelector("#myBox");
  var bounds = ele.getBoundingClientRect();
  var html = document.documentElement;
  var body = document.body;
  var x = bounds.left + (body.scrollLeft || html.scrollLeft) - html.clientLeft;
  var y = bounds.top + (body.scrollTop || html.scrollTop) - html.clientTop;
</script>

jQueryでoffsetを使った例

<div id="main_box">
 <div id="sub_box">
  <div id="myBox"></div>
 </div>
</div>
<script type="text/javascript">
  $('#result1').text('getBoundingClientRectでは(' + x +',' + y + ')');
  var elm = $('#myBox');
  var x = $(elm).offset().left;
  var y = $(elm).offset().top;
</script>

座標取得サンプル

ここの絶対座標値は