offsetTop 是一个非常有用的属性，用于获取元素相对于其 offsetParent 节点的顶部的距离。这个距离是以像素为单位的整数值。
什么是 offsetParent？
offsetParent 是一个节点，它决定了 offsetTop 的计算方式。默认情况下，offsetParent 是最近的具有定位属性（position 属性值为 relative、absolute 或 fixed）的祖先元素。如果文档中的所有元素都没有定位属性，那么 offsetParent 将是 <html> 元素。
示例：理解 offsetParent
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
------------------- ----------
-------
--------- -
--------- ---------
-
---- -
------ ------
------- ------
----------------- ----
-
--------
-------
------
---- -----------------
---- ------------------
------
--------
----- --- - -------------------------------
--------------------------- -- ------- ------------ -----
---------
-------
-------在这个示例中，.box 元素的 offsetParent 是 .relative，因为 .relative 具有 position: relative; 样式。
使用 offsetTop 获取元素位置
offsetTop 属性可以用来确定元素在页面上的垂直位置。这在需要动态调整元素位置或执行一些基于位置的操作时特别有用。
示例：动态调整元素位置
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
---------------- ----------------
-------
---------- -
--------- ---------
------- ------
------- --- ----- ------
-
---- -
------ ------
------- ------
----------------- -----
-
--------
-------
------
---- ------------------
---- ------------------
------
------- ---------------------------------
--------
-------- --------- -
----- --------- - -------------------------------------
----- --- - -------------------------------
----- ------ - --------------
-- ------- -- --
------------- - ------- - --- - -----
-
---------
-------
-------在这个示例中，点击按钮会将 .box 元素向下移动 50 像素。这里使用了 offsetTop 来获取当前的位置，并将其作为新的位置的一部分。
注意事项
- 如果元素没有设置
top样式，那么offsetTop返回的是元素相对于offsetParent的顶部偏移量。 - 如果
offsetParent没有定位属性，那么offsetTop返回的是元素相对于<html>元素的顶部偏移量。 offsetTop返回的是一个整数值，不包含单位（如 px）。
总结
offsetTop 属性是一个强大的工具，用于获取元素相对于其 offsetParent 的垂直位置。通过结合其他相关属性和样式，你可以更灵活地控制网页布局和元素位置。
