使用纯 Javascript 检测 DOM 元素位置变化

【问题标题】：Detect DOM element position change using pure Javascript使用纯 Javascript 检测 DOM 元素位置变化
【发布时间】：2013-06-02 06:23:52
【问题描述】：

我想在 DOM 元素的位置发生变化时通知。我在元素顶部的文档中有一个绝对位置的图像，但是当例如我的元素顶部的某些东西的大小发生变化时，我的元素的位置会发生变化（它下降）并且图像位置不会改变。如果我可以检测到元素的位置变化，我可以重新定位图像。有什么办法吗？

【问题讨论】：

所以，没有 jQuery ？？？我们需要检查一下。一些代码示例或...：/
使用setInterval 投票getBoundingClientRect。我不认为有其他方法。除非您知道是什么导致“我的元素顶部的某些东西的大小”发生变化。

【解决方案1】：

我在文档中的元素顶部有一个绝对位置的图像，但是当例如我的元素顶部的某些东西的大小发生变化时，我的元素的位置会发生变化（它下降）并且图像位置不会改变。

不确定这是否需要 JavaScript - 或者您可能只需要扩展您对绝对定位工作原理的了解......？

一个带有position:absolute 的元素被定位在它最近的祖先元素上，其位置不是默认的static——如果不存在这样的祖先元素，它就会被定位在视口上。

我认为您的问题属于后者——因此，如果您希望图像根据其祖先元素的位置之一进行定位，只需尝试给该祖先元素position:relative。

【讨论】：