圖解JavaScript中的一些定位屬性

有這張圖就夠了，簡單地說明一下

以Height為例，Width同理：

• div.clientHeight：可見視窗除去了margin+border之後的長度。
• div.offsetHeight：在div.clientHeight的基礎上加了border和捲軸的長度。
• div.scrollHeight：就是元素內容的實際高度。

以Top為例，Left同理：

• div.clientTop：margin之後padding之前的長度值。
• div.offsetTop：該元素的上border的上邊緣 到 該元素的offsetParent的上border內邊緣的垂直距離。
• div.scrollTop：對象的最頂部到對象在當前視窗顯示的範圍內的頂邊的距離，即是在出現了縱向捲軸的情況下，捲軸拉動的距離。

關於offsetParent，不同的瀏覽器有不同的實現演算法，有一種常見布局在各種瀏覽器中 offsetParent 是一樣的，那就是：外層元素 div 的 position 計算值是 relative、absolute 時，內層元素 div 的 offsetParent 總是外層元素 div。

來源：http://blog.endlesscode.com/2010/03/16/position-property-of-element-in-javascript/