HTML | DOM offsetParent 属性

简介

offsetParent 属性返回元素的偏移容器。偏移容器是指最接近的已经定位（即 position 值不是 static）的祖先元素，也就是该元素的容器坐标系。如果没有已经定位的祖先元素，则偏移容器为 HTML body 元素。

如果元素为 fixed，则 offsetParent 返回 null。

语法

element.offsetParent

其中，element 是指要获取偏移容器的元素对象。

示例

HTML

<div class="outer">
  <div class="inner">Hello World!</div>
</div>

CSS

.outer {
  position: relative;
}

.inner {
  position: absolute;
  left: 50px;
  top: 50px;
}

JavaScript

const inner = document.querySelector('.inner');
const offsetParent = inner.offsetParent;
console.log(offsetParent); // <div class="outer">

在上面的示例中，我们定义了一个包含两个 div 元素的 HTML 结构，其中外层 div 元素设置了 position: relative，内层 div 元素设置了 position: absolute，表示它是相对于父元素进行定位的。

在 JavaScript 中，我们使用 querySelector 方法获取到内层 div 元素，并调用 offsetParent 属性获取到其偏移容器，即外层 div 元素。最后在控制台输出偏移容器元素对象。

总结

offsetParent 属性在 Web 开发中是十分有用的。我们可以使用它来获取元素的偏移容器，并进一步计算出元素相对于文档或其他元素的位置，从而实现各种复杂的页面布局效果。如果您还没有掌握 offsetParent 属性的使用方法，不妨多多尝试，相信您一定会在 Web 开发中受益匪浅！