元素的偏移位置指的是相对于最近定位的父节点或 body 元素的偏移位置。使用元素的 offsetParent 属性可以获取元素的最近定位的父节点，而使用 offsetLeft 和 offsetTop 属性可以分别获取元素相对定位父元素或 body 元素的水平和垂直偏移位置。
图 1：获取元素的偏移父节点
图 2：获取元素的水平和垂直偏移位置
【例 1】获取元素的偏移父节点。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取偏移父节点</title>
<style>
#div2{
position:relative;
}
#div3{
position:relative;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4"></div>
</div>
</div>
</div>
<script>
var div2 = document.getElementById('div2');
var div4 = document.getElementById('div4');
console.log("第二个div的偏移父节点为：");
console.log(div2.offsetParent);
console.log("第四个div的偏移父节点为：");
console.log(div4.offsetParent);
</script>
</body>
</html>
上述代码在 Chrome 浏览器中的运行结果如图 1 所示。
图 1：获取元素的偏移父节点
【例 2】获取元素的水平和垂直偏移位置。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取元素的水平及垂直偏移位置</title>
<style>
#div1{width:100px;height:100px;border:3px solid red;}
#div2{width:70px;height:70px;border:3px solid blue;position:relative;}
#div3{width:50px;height:50px;border:3px solid green;position:absolute;left:20px;
top:10px;}
#div4{width:30px;height:30px;border:3px solid olive;position:absolute;left:20px;
top:10px;}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4"><div>
</div>
</div>
</div>
<script>
var div2 = document.getElementById('div2');
var div4 = document.getElementById('div4');
console.log("第二个div的水平偏移位置为：");
console.log(div2.offsetLeft);
console.log("第四个div的水平偏移位置为：");
console.log(div4.offsetLeft);
console.log("第二个div的垂直偏移位置为：");
console.log(div2.offsetTop);
console.log("第四个div的垂直偏移位置为：");
console.log(div4.offsetTop);
</script>
</body>
</html>
上述代码在 Chrome 浏览器中的运行结果如图 2 所示。
图 2：获取元素的水平和垂直偏移位置
由例 2 的 CSS 代码可知，第二个 div 没有定位父节点，所以其偏移相对于 body 节点，其水平和垂直偏移位置分别等于第一个 div 的边框宽度（3px）加上 body 的默认外边距（8px），因而结果为 11px。
第四个 div 有两个定位祖先节点，其中第三个 div 离它最近，因而它的偏移父节点为第三个 div，它的样式代码中的 left 属性值（20px）正是相对于偏移父节点的水平距离，top 属性值（10px）正是相对于偏移父节点的垂直距离，因而它的水平和垂直偏移位置分别为 20 和 10。
第四个 div 使用了内嵌样式代码来设置水平和垂直偏移，因而它的偏移位置也可以使用 getComputedStyle() 来获取，即 div4.offsetLeft 也可以使用 getComputedStyle(div4).left 来代替；div.offsetTop 使用 getComputedStyle(div4).top 来代替。需要注意的是，getComputedStyle() 方法获取的结果默认为 px 为单位，并会在结果中包含 px。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/24018.html