js中offsetParent详解

在JavaScript中，offsetParent属性是一个只读属性，返回最近的包含该元素的定位（position属性为relative、absolute或fixed）元素。offsetParent属性返回的是一个元素节点对象。
当一个元素被放置在一个相对定位的元素内时，会相对于这个元素定位。而当一个元素被放置在一个绝对定位的元素内时，会相对于最近的定位祖先元素定位。offsetParent属性返回的就是这个最近的定位祖先元素。
如果元素的定位祖先元素中，没有一个元素是定位的（position属性为relative、absolute或fixed），那么offsetParent属性的值就是最近的具有非static定位的祖先元素，通常是body元素。如果元素本身具有fixed定位，那么offsetParent属性的值就是null。
使用offsetParent属性可以找到一个元素相对于页面的偏移位置。可以通过对offsetParent属性进行递归迭代，直到找到最终的offsetParent为null，然后将每个offsetLeft和offsetTop相加，得到元素相对于页面的偏移位置。
以下是一个使用offsetParent属性的示例：
```javascript
var element = document.getElementById("myElement");
var offsetLeft = 0;
var offsetTop = 0;
while (element) {
offsetLeft += element.offsetLeft;
offsetTop += element.offsetTop;
element = element.offsetParent;
}
console.log("Offset left: " + offsetLeft);
console.log("Offset top: " + offsetTop);
```
上述代码通过递归迭代元素的offsetParent属性，将每个元素的offsetLeft和offsetTop相加，计算出元素相对于页面的偏移位置。