offsetTop
是一個只讀屬性,它返回元素相對于其包含塊(containing block)的頂部邊界的偏移量,以像素為單位。這個偏移量不包括元素的邊框、內邊距和外邊距。
當元素嵌套在其他元素中時,offsetTop
的計算是基于包含塊的頂部邊界進行的。具體來說,它會考慮當前元素的包含塊,然后向上遍歷所有祖先元素,直到找到最頂層的包含塊。在這個過程中,它會累加每個祖先元素的 offsetTop
值。
需要注意的是,offsetTop
只關心元素相對于其直接包含塊的偏移量,而不關心更遠的祖先元素。此外,如果元素的 position
屬性值為 absolute
或 fixed
,則 offsetTop
的計算將不受正常文檔流的影響,而是基于其最近的已定位(positioned)祖先元素。
下面是一個簡單的例子來說明嵌套元素中 offsetTop
的計算:
<div style="position: relative; width: 200px; height: 200px; border: 1px solid black;">
<div style="position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; border: 1px solid red;">
<div style="position: relative; top: 20px; left: 20px; width: 60px; height: 60px; border: 1px solid blue;">
<!-- 這個元素是我們要計算 offsetTop 的元素 -->
</div>
</div>
</div>
在這個例子中,最內層的元素(藍色邊框)的 offsetTop
值將是其直接包含塊(紅色邊框)的 offsetTop
值(50px)加上其自身相對于直接包含塊的偏移量(20px),即 70px。注意,這里我們沒有累加更遠的祖先元素的 offsetTop
值,因為它們不是直接包含塊。