​父元素以relative方式定位的子元素怎么用js获取子元素到网页顶部的距离

Posted 2023-04-08

用element.offsetTop就可以了, 不过按照你的要求, 应该要做个循环

下面是代码

console.log(getAbsoluteTop(document.getElementById("test")));
function getAbsoluteTop(ele)
    var rtn = ele.offsetTop;
    var o = ele.offsetParent;
    while(o!=null)
      
        rtn += o.offsetTop; 
        o = o.offsetParent;
    
    return rtn;

参考技术A 用offset（）.top，距离顶部偏移量追问

这个是jq方法把，不想用jq库太大，用js怎么实现呢？

使父元素扩展以包含相对定位的子元素？

【中文标题】使父元素扩展以包含相对定位的子元素？

【英文标题】：Making parent element expand to contain a relatively positioned child?

【发布时间】：2018-11-06 21:38:03

【问题描述】：

是否有一种简单的方法（无需手动设置任何高度）来确保父元素始终包裹/包含子元素，即使子元素已相对定位？

<div style="background-color: red;">
  <div style="background-color: pink; position: relative; top: 20px">
    one.
  </div>
</div>
<div>
  two.
</div>

在上面的例子中是“一”。 div 流出其父级并重叠/隐藏“两个”。 div，但我想要的效果是让父 div 包含整个孩子和“两个”。元素在下面流动。

【问题讨论】：

参考这个：重复：***.com/questions/1709442/…>

那是关于浮动的，这不是，不是重复的。不过，这是一个愚蠢的问题，mehulmpt 完美地回答了它，已经太久没有网络内容了。

【参考方案1】：

top 用于定位元素，使其对周围元素没有影响。如果您还想影响父元素，请使用margin-top，否则top 不会影响其他元素。

<div style="background-color: red; display: flex;">
  <div style="background-color: pink; position: relative; margin-top: 20px">
    one.
  </div>
</div>
<div>
  two.
</div>

【讨论】：

噢！现在我觉得自己很傻，好久没有做网络的东西了。谢谢！