簡(jiǎn)單說下:offsetTop

offsetTop: 為只讀屬性。 返回的是一個(gè)數(shù)字。
它返回當(dāng)前元素相對(duì)于其 offsetParent 元素的頂部內(nèi)邊距的距離。
它等價(jià)于offsetTop==>元素到offsetParent頂部內(nèi)邊距的距離
offsetTop并不是指距離瀏覽器窗口最左邊的位置。
我的理解：offsetTop的偏移是指當(dāng)前元素相對(duì)其距離自己最近的具有定位屬性的父級(jí)元素的偏移值。
margin:會(huì)影響它的值。 定位的值會(huì)影響。 border也會(huì)影響。但是padding不會(huì)影響。
offsetLeft跟offsetTop是一樣的。他們是一對(duì)的。

offsetTop 的簡(jiǎn)單使用

    

        我是標(biāo)題
    
    

        我是導(dǎo)航
    
    

        我是內(nèi)容
    

margin 會(huì)影響它的值(margin-bottom也不會(huì)), border也會(huì)影響，padding不會(huì)

    

        我是標(biāo)題
    
    

        我是導(dǎo)航
    
    

        我是內(nèi)容
    

定位會(huì)影響它的值

    


    

        我是標(biāo)題
    
    

        我是導(dǎo)航
    
    

        我是內(nèi)容
    

當(dāng)前元素相對(duì)其距離自己最近的具有定位屬性的父級(jí)元素的偏移

    

        

            son
        
    

子絕父相-子元素距離屏幕頂部的距離

    

        

            son
        
    

offsetParent

HTMLElement.offsetParent 是一個(gè)只讀屬性.
返回一個(gè)指向最近的（指包含層級(jí)上的最近）包含該元素的定位元素或者最近的 table, td, th, body 元素。
當(dāng)元素的 style.display 設(shè)置為 "none" 時(shí)，offsetParent 返回 null。

等價(jià)于offsetParent：返回指向最近的一個(gè)具有定位的祖宗元素（relative，absolute，fixed）。
若祖宗都不符合條件，offsetParent為body。


    

        son1
    
    

        son
    


let son = document.getElementById('son')
let ele = son.offsetParent;
console.log('ele', ele); // 輸出的是body這個(gè)元素 若祖宗都不符合條件，offsetParent為body。