Offset,Client,Scroll,Height,Top 一些距离参数的图示和解释

最新推荐文章于 2025-09-20 10:37:08 发布

转载最新推荐文章于 2025-09-20 10:37:08 发布 · 1k 阅读

文章标签：

#scroll #hierarchy #standards #distance #reference #object

本文详细解释了前端开发中常用的布局定位属性，包括clientTop/clientLeft、ScrollTop/ScrollLeft及OffsetTop/OffsetLeft等概念的区别与联系，并介绍了offsetParent的作用。

先上一张神图

按上右下左的顺序来：

1.clientTop,clientLeft

等于borderTop,borderLeft，就是border的宽度

2.ScrollTop,ScrollLeft

padding+border宽度+已滚动的高度/宽度

3.OffsetTop，OffsetLeft

offsetTop returns the distance of the current element relative to the top of the offsetParent node.

OffsetTop返回当前元素相对OffsetParent节点顶部的距离

offsetParent returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. If the element is non-positioned, the nearest table cell or root element (html in standards compliant mode; body in quirks rendering mode) is the offsetParent. offsetParent returns null when the element has style.display set to "none". TheoffsetParent is useful because offsetTop and offsetLeft are relative to its padding edge.