简单说下:offsetTop

offsetTop: 为只读属性。 返回的是一个数字。它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。它等价于offsetTop==>元素到offsetParent顶部内边距的距离offsetTop并不是指距离浏览器窗口最左边的位置。我的理解：offsetTop的偏移是指当前元素相对其距离自己最近的具有定位属性的父级元素的偏移值。margin:会影响它的值。 定位的值会影响。 border也会影响。但是padding不会影响。offsetLeft跟offsetTop是一样的。他们是一对的。

offsetTop 的简单使用

    
        我是标题        
        我是导航        
        我是内容        let cont = document.getElementById('cont')    let dingbuTop = cont.offsetTop;    console.log('dingbuTop', dingbuTop); //输出的是50    /* 之所以是50=21+21+*        div的默认高度是21；有两个div。 body的外边距margin:8px；    */

margin 会影响它的值(margin-bottom也不会), border也会影响，padding不会

    #cont {        padding: 10px;        background: red;        margin-top: 50px;    }    
        我是标题        
        我是导航        
        我是内容        let cont = document.getElementById('cont')    let dingbuTop = cont.offsetTop;    // body的外边距margin:8px;div的默认高度是21；有两个div。    //padding 并没有影响它的值    console.log('dingbuTop', dingbuTop); //输出的是 8+21+21+50=100

定位会影响它的值

            #cont {            background: red;            position: absolute;            top: 150px;            left: 150px;        }        
        我是标题        
        我是导航        
        我是内容        let cont = document.getElementById('cont')    let dingbuTop = cont.offsetTop;    console.log('dingbuTop', dingbuTop); //输出的是150

当前元素相对其距离自己最近的具有定位属性的父级元素的偏移

#cont {    margin-top: 100px;    position: relative;}#son {    background: pink;    position: absolute;    left: 10px;    top: 10px;}    
        
            son                let son = document.getElementById('son')    let dingbuTop = son.offsetTop;    console.log('dingbuTop', dingbuTop);  //输出的10

子绝父相-子元素距离屏幕顶部的距离

    #cont {        margin-top: 100px;        position: relative;        background: #000;    }    #son {        background: pink;        position: absolute;        left: 10px;        top: 10px;    }    
        
            son            let son = document.getElementById('son')let dingbuTop = son.offsetTop + son.offsetParent.offsetTop;console.log('dingbuTop', dingbuTop); //输出的是 110

offsetParent

HTMLElement.offsetParent 是一个只读属性.返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table, td, th, body 元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。等价于offsetParent：返回指向最近的一个具有定位的祖宗元素（relative，absolute，fixed）。若祖宗都不符合条件，offsetParent为body。
    
        son1        
        son    let son = document.getElementById('son')let ele = son.offsetParent;console.log('ele', ele); // 输出的是body这个元素 若祖宗都不符合条件，offsetParent为body。

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。 作者：晚来南风晚相识
出处：https://www.cnblogs.com/IwishIcould/

想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！

如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！

万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾！

想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！

支付宝微信 本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
如果文中有什么错误，欢迎指出。以免更多的人被误导。