Javascript 如何确定HTML元素在视觉上是位于另一个元素的左侧、右侧、顶部还是底部？

我正试图确定什么是了解一个元素相对于另一个元素的“可视”位置（而不是DOM树位置）的最佳方法

例如，我有一个元素数组，我有一个选定的元素，我想知道这些元素中的哪些元素在视觉上位于选定元素的右侧

还要注意，元素可以是任何标记类型，并且可以具有任何位置（相对、绝对、固定）和显示（只要可见）

---

欢迎使用任何jQuery解决方案。

为什么不简单地使用

element.offsetTop

和

element.offsetLeft

，其中

offsetTop

是y轴，

offsetLeft

是x轴。
如果坚持使用

$（element.offset（），则根本不需要jQuery可能就可以了

请注意，窗口的左上角是0-0点。左侧“卡住”的元素将具有
offsetLeft==0
，顶部要t的元素具有
offsetTop==0
。就这些，真的吗

针对扎克卢兹的评论：

要获取对象的尺寸，请执行以下操作：

var dimension = {top:    {x:  element.offsetLeft, y: element.offsetTop},
                 bottom: {x: element.offsetWidth, y: element.offsetHeight}
};

请注意，
offsetWidth
和
offsetHeight
已知在某些情况下返回0，其中DOM刚刚被重新绘制（从刚修改的元素获取这些属性可能会导致此情况）。

为了避免这种情况，有些人倾向于使用
setTimeout（）获取他们怀疑可能刚刚被更改的元素的偏移量时

作为对评论的回应，我被指出，您可以简单地使用
getBoundingClientRect
来避免
offsetX
属性出现任何问题：

document.getElementById('foo').getBoundingClientRect();

这将返回
ClientRect
对象的实例，您可以使用该实例进行播放
 那么，您尝试了什么？使用
position（）
获取要比较的元素和要比较的元素的位置，并进行比较。我尝试使用
position（）
计算内容，但这并没有按预期工作。使用
offset（）
进行了尝试，它似乎给出了计算所需的坐标。所以感谢@spyk3hyou可能还提到它只给出了对象的起始位置。如果一个对象位于另一个对象内，则它可能比第一个对象晚（如在较高的x或y中），但也可能比第一个对象早结束。您可以通过将对象的宽度添加到
offsetLeft
并将对象的高度添加到
offsetTop
@Zeaklous来检查是否存在这种情况：我曾想过发布一段我不久前编写的旧标记云脚本的片段，但这会使我们离OP真正想要的东西太远（只是为了知道一个元素的位置），这将使他无所事事。计算不同z轴上元素的碰撞……哦，这是多么有趣的事情：Pyeah，zeaklous注释中的代码跨度“offsetLeft”的偏移量为89，但“add comment”OP下的链接的值为199。为什么高于其他链接的链接的y轴更高？
offsettop
和
offsetLeft
都从窗口左上角的0开始window@dandavis当前位置不确定我是否完全理解你的评论（我要睡觉了，这里很晚了），但
添加注释
链接位于所有当前注释的下方。因此注释的
偏移量
将始终较低（y=0为屏幕顶部）