井井客

搜索

offsetTop差一个相对定位结果大不同

涨姿势了,offsetTop计算与父元素设置position有关系。比较好理解的就是它会向上级节点追踪到设置了相对定位的节点(追踪至body),并通过这个节点来取offsetTop值。

offsetTop差一个相对定位结果大不同

知识源于积累,这个是群里面小伙伴提出的问题,之前也不是特别了解,像获取高度,左距离,宽度等等我自己也是特别容易搞混,用的时候都会先去查一下再来使用。

所以这次也不例外,去查了一下资料。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop,通过这个网址可以看到

topPos = element.offsetTop;

下面的解释是topPos is the number of pixels from the top of the closest relatively positioned parent element

翻译closest relatively positioned parent element为最相对定位的父元素

到这里,就比较清楚了,相对定位的父元素嘛。CSS里面的position就是它的钥匙了。

举个例子,我们在使用position:absolute;时应该知道它默认是相对于body,而如果它的父级元素设置了position:relative,那么它是相对于它父级元素。

而offsetTop也是相同道理,如果它所有的父元素们都没有设置position:relative,那么它就是相对于body的高度,反之则是设置position:relative的父元素中最接近它的那个父元素跟它的高度了。

文章TAG:JS

作者:井井客原创来源:原创
本文标题:offsetTop差一个相对定位结果大不同
本文链接:/c/09252.html

上一篇:vue2绑定表单select value的值在option value/text不一致时处理
下一篇:【VUE实例】vue2中watch数组对象查看新旧值

文章分类

相关阅读

随便看看