3-7 坐标算法
本节编程练习不计算学习进度，请电脑登录imooc.com操作

坐标算法

获取位置有 offset 与 position两个方法。

offset()
方法允许我们检索一个元素相对于文档（document）的当前位置，它和.position()的差别在于：.position()是相对于相对于父级元素的位移。

当通过全局操作（特别是通过拖拽操作）将一个新的元素放置到另一个已经存在的元素的上面时，若要取得这个新的元素的位置，那么使用 .offset() 更合适。

jQuery不支持获取隐藏元素的偏移坐标。同样的，也无法取得隐藏元素的 border, margin, 或 padding 信息。位置的方法没有像witdh/height一样去修复了 display:none 的情况。所以针对offset的定义是相对文档的，传统来说用offsetLeft和offsetTop是可以的，但是兼容各种浏览器以及各种不同的元素就会把你弄死，而且效率还非常低下。所以获取页面上某个元素相对于浏览器窗口的偏移量就成了getBoundingClientRect的用武之地了，但是还是会有一些兼容性的问题的。

在具体表现方面，Firefox6以前的版本使用getBoundingClientRect时不能获取到top和bottom这两个属性值，Firefox6及以后的版本和其他支持getBoundingClientRect方法的浏览器则top、left、right、bottom四个属性值均能获取到。需要说明的是由于某些版本的IE浏览器的<html>文档根元素默认是有2px边框的,所以这里需要特别处理一下，微软MSDN上说在IE5中会存在这样的情况，我们只要把得到的值减去html根元素（body也可考虑进来）的clientLeft或clientTop就能保持各浏览器一致啦。

top: box.top + win.pageYOffset - docElem.clientTop,
left: box.left + win.pageXOffset - docElem.clientLeft


position()
.position()方法可以取得元素相对于父元素的偏移位置。与.offset()不同， .offset()是获得该元素相对于documet的当前坐标，当把一个新元素放在同一个容器里面另一个元素附近时，用.position()更好用。.position()返回一个包含 top 和 left 属性的对象.Position是一个相对父元素的定位所以实际的距离还要跟当然用了定位的属性有关系。

我们分析下几种情况：

Fixed：生成绝对定位的元素，相对于浏览器窗口进行定位，明显这样的定位的父元素就的文档了，也就没有父元素的相对点，但实际上我们根据盒子模型来算的话，实际上的定位出了left还有一个margin是会影响结果的，所以真实的定位值。

Left = ele.offset().left  –jQuery.css(elem, " marginLeft ", true)
Top = ele.offset().top –jQuery.css(elem, " marginTop", true)

这样的算法才是精确的。

如果元素采用了Static、absolute、relative属性，那么都是跟定位有关系，都有父级的相对点，这样我们可以通过获取元素的offsetParent得到最近的父元素。这样的算法就比较简单了，我们可以获取元素相对文档的最真实的坐标减去父节点相对文档的坐标，这里涉及了2个元素的盒子模型所以都需要加上影响的属性。父节点的精确值要加上border的处理。

parentOffset.top += jQuery.css(offsetParent[0], "borderTopWidth", true);
parentOffset.left += jQuery.css(offsetParent[0], "borderLeftWidth", true);

所以最终的计算公式：

top: offset.top - parentOffset.top - jQuery.css(elem, "marginTop", true),
left: offset.left - parentOffset.left - jQuery.css(elem, "marginLeft", true)

 

任务

index.html 
  1. 获取位置<!doctype html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  5.   <style type="text/css">
  6.       div { padding: 15px;width: 200px;}
  7.       p { margin:50px;}
  8.   </style>
  9. 	<script src="http://code.jquery.com/jquery-latest.js"></script>
  10. 	<title>position</title>
  11. </head>
  12. <body>
  13.  
  14. <div style="position:static;left:50px;top:50px;border:20px solid #ccc">
  15.   <p id="aaron" style="position:static;left:30px;top:110px;border:25px solid red">Hello</p>
  16. </div>
  17. <ul>
  18. </ul>
  19.  
  20. <script type="text/javascript">
  21.  
  22. var p = $("#aaron");
  23. var position = p.position();
  24. var offset = p.offset();
  25.  
  26. $('ul').append('<li>p元素position坐标: left:'+ position.left +' top:'+ position.top +';</li>\n<li>p元素offset坐标: left:'+ offset.left +' top:'+ offset.top +';</li>')
  27.  
  28. </script>
  29.  
  30. </body>
  31. </html>
下一节