如何確定HTML元素是否可視化到其他元素的左側，右側，頂部或底部？

Question

我想確定什麼是最好的方式來知道元素相對於另一個元素的「視覺」位置（不是DOM樹位置）。

例如，我有一個元素數組，並且有一個選定的元素，並且想知道哪些元素在視覺上位於所選元素的右側。還請注意，元素可以是任何標籤類型，並且可以具有任何位置（相對，絕對，固定）和顯示（只要它是可見的）。

歡迎任何jQuery解決方案。

Answer 1

爲什麼不能簡單地用element.offsetTop和element.offsetLeft其中offsetTop是y軸，和offsetLeft是x軸。
根本不需要jQuery，但如果你堅持$(element).offset();可能會。

請注意，窗口的左上角是0-0點。元素「卡住」左側將有offsetLeft === 0，頂部的元素有offsetTop === 0。這是所有有過，真的

針對zeaklous'評論：
要獲得尺寸對象的：

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對象的實例，與您可以玩。 Check MDN for details