To start with, let’s look at finding an element’s position within a page. You have a couple
element properties at your disposal 在你支配下 that you can use to find this information. All modern
browsers support the following three properties; how they handle them, however, is another
matter:
offsetParent: Theoretically, this is the parent that an element is positioned within. However,
in practice, the element that offsetParent refers to depends on the browser (for
example, in Firefox it refers to the root node, and in Opera, the immediate parent 直接父亲).
offsetLeft and offsetTop: These parameters are the horizontal and vertical offsets of the
element within the context of the offsetParent. Thankfully, this is always accurate in
modern browsers.
The trick, now, is to find a way that you can determine a consistent cross-browser measure
of an element’s location. The most consistent way to do this is by using the methods
presented in Listing 7-4, traversing up the DOM tree using the offsetParent property and
adding up the offset values along the way.
// Find the X (Horizontal, Left) position of an element function pageX(elem) { var p = 0; // We need to add up all of the offsets for every parent while ( elem.offsetParent ) { // Add the offset to the current count p += elem.offsetLeft; // and continue on to the next parent elem = elem.offsetParent; } return p; } // Find the Y (Vertical, Top) position of an element function pageY(elem) { var p = 0; // We need to add up all the offsets for every parent while ( elem.offsetParent ) { // Add the offset to the current count p += elem.offsetTop; // and continue on to the next parent elem = elem.offsetParent; } return p; }
或用递归：
elem.offsetParent
offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回 null。
返回的对象是an object reference to the element in which the current element is offset. （一个对象，elem相对于其偏移的）
<script type="text/javascript" language="JavaScript"> function offset_init(){ var pElement = document.getElementById("sonObj"); parentObj = pElement.offsetParent; alert(parentObj.tagName); } </script> </head> <body onload="offset_init()"> <div id="parent"> <p id="sonObj">测试OffsetParent属性</p> </div> </body>
输出BODY 为什么？
如果是alert(document.body.offsetParent); null说明body元素，返回的是null
接下来的难题就是找出元素相对于他的父亲的水平和垂直位置。需要注意的是，简单实用style.left或style.top并不够，因为需要处理的元素可能尚未经过javascript或css的样式化。
使用元素相对于其父亲的位置，就可以为dom元素增加额外的元素，并相对于它的父亲定位，例如：他对制作上下文工具条提示非常重要。
要找到元素相对于他对父亲元素的位置，你必须再次使用offsetP属性，因为该属性并不保证能够返回指定元素的真实父亲，你必须使用pageX和pageY来找出父亲元素和子元素之间的差距。
在下面的代码中，如果是当前元素的真实父亲，使用offsetP，否则，继续遍历dom，使用pageX和pageY来确定他的真实位置。
确定元素相对于父亲的位置的函数。
// Find the horizontal positioing of an element within its parent function parentX(elem) { // If the offsetParent is the element’s parent, break early return elem.parentNode == elem.offsetParent ? elem.offsetLeft : // Otherwise, we need to find the position relative to the entire // page for both elements, and find the difference
我们需要找出元素和元素的父亲相对于整个页面的位置，并计算它们的差.
pageX( elem ) - pageX( elem.parentNode ); } // Find the vertical positioing of an element within its parent function parentY(elem) { // If the offsetParent is the element’s parent, break early return elem.parentNode == elem.offsetParent ? elem.offsetTop : // Otherwise, we need to find the position relative to the entire // page for both elements, and find the difference pageY( elem ) - pageY( elem.parentNode ); }
parentNode：parentNode 属性可返回某节点的父节点。
关于元素位置的最后一个难题是，获取元素相对于他的css容器的位置，如果所述，即使元素包含在一个元素内，但可以相对于其他的父亲元素而定义（使用相对和绝对定位）。记住这一点，就可以求助getStyle函数得到css偏移的最终值，这等于元素的位置值。
要解决这个问题，可以使用下面的2个封装函数，他们都只调用getStyle函数，同时去除了干扰性的单位信息（如100px会变成100，单位只有在不急于像素的布局中才显得重要）。
获取元素的css位置的辅助函数
// Find the left position of an element function posX(elem) { // Get the computed style and get the number out of the value return parseInt( getStyle( elem, “left” ) ); } // Find the top position of an element function posY(elem) { // Get the computed style and get the number out of the value return parseInt( getStyle( elem, “top” ) ); }
设置位置
与获取位置相比，设置位置更缺乏弹性。但是结合不同的布局手段，你就可以获得有可比性也可用的结果。
目前，调整元素位置的唯一方法是修改它的css属性。 下面的2个函数可以用他们来设置元素的位置，不管这个的当前位置在哪里。
// A function for setting the horizontal position of an element function setX(elem, pos) { // Set the ‘left’ CSS property, using pixel units elem.style.left = pos + “px”; } // A function for setting the vertical position of an element function setY(elem, pos) { // Set the ‘left’ CSS property, using pixel units elem.style.top = pos + “px”; }
最后，还需要开发另外一对函数，你可用他们来设置元素相对于他之前最后一次变更位置之间的差距。如，调整元素的位置向左偏移5px，各种不同的动画效果，都跟这些方法密切相关。
// A function for adding a number of pixels to the horizontal // position of an element function addX(elem,pos) { // Get the current horz. position and add the offset to it. setX( posX(elem) + pos ); } // A function that can be used to add a number of pixels to the // vertical position of an element function addY(elem,pos) { // Get the current vertical position and add the offset to it setY( posY(elem) + pos ); }