http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html
http://www.cnblogs.com/bobodeboke/p/6935086.html
一、获取元素的大小和位置
方法一、利用offsetXXX属性
1）offsetHeight：元素垂直方向占用空间，包括内边距，上下边框。
2)offsetWidth:元素水平方向占用空间，包括内边距，左右边框。
3）offsetLeft:元素的左外边框至包含元素（offsetParent引用中）的左内边框之间的像素距离。
4）offsetTop:元素的上外边框至包含元素（offsetParent引用中）的上内边框之间的像素距离。
根据offsetLeft和offsetTop，向上回溯到根元素，可以得到元素在页面的偏移量：
//获取元素在页面的左偏移
function getElementLeft(element){
var acturalLeft=element.offsetLeft;
var current=element.offsetParent;
while(current!=null){
acturalLeft+=current.offsetLeft;
current=current.offsetParent;
}
return acturalLeft;
}
//获取元素在页面的上偏移
function getElementTop(element){
var acturalTop=element.offsetTop;
var current=element.offsetParent;
while(current!=null){
acturalTop+=current.offsetTop;
current=current.offsetParent;
}
return acturalTop; }
二、获取元素的客户区大小clientWidth,以及clientHeight;
元素客户区大小是指元素内容及其内边距所占据的空间大小，从字面上看，客户区大小就是元素内部空间的大小，因此不包含边框和滚动条。
clientWidth是元素内容区域宽度加上左右内边距宽度
clientHeight是元素内容区域高度加上上下内边距的宽度
常见的用法是获取浏览器窗口的大小：
var width=document.documentElement.clientWidth||document.body.clientWidth;
var height=document.documentElement.clientHeight||document.body.clientHeight;
方法二、利用getBoundingClientRect()方法
该方法返回一个矩形对象，包含left，top，right和bottom四个属性。这些属性给出了元素相对于视口的位置。
其中right和left的差值和offsetWidth的值相等，bottom和top差值和offsetHeight的值相等。left和top属性大致等于前面得getElementTop和getElementLeft
（IE认为文档左上角是（2,2），其他包括IE9则认为左上角为(0,0)）
三、滚动元素大小和位置的确定
1)scrollHeight:如果没有滚动条，元素的总高度(即将滚动折叠部门的高度也包括进去)
2）scrollWidth:如果没有滚动挑，元素的总宽度
3）scrollLeft：被滚动条隐藏在左侧区域的像素数目。通过设置这个属性可以改变元素的滚动位置
4）scrollTop：被滚动条隐藏在上侧区域的像素数目。通过设置这个属性可以改变元素的滚动位置
四、鼠标位置的获取
1)事件对象event的clientX与clientY属性：事件发生时候，鼠标指针在视口的水平和竖直坐标
2)事件对象event的pageX与pageY属性：事件发生时候，鼠标指针在页面的水平和竖直坐标，在页面没有滚动的时候，等于clientX和clientY
3)事件对象event的screenX与screenY属性：事件发生时候，鼠标指针相对于屏幕的水平和竖直坐标
4）IE提供了事件对象event的offsetX与offsetY属性：事件发生时候，鼠标相对于目标元素边界的水平和竖直坐标