Position relative div getting different offset

Question

I have following html, I'm getting topOffset of each div, but child div under position:relative div are taking unexpected offset, I can't remove position, any help/solution would be great.

I'm trying to set some js behavior on some randomly generating div with offset.

Note: I can only use javascript not jq.

document.getElementById('demo').innerHTML = document.getElementById('div1').offsetTop + " " + document.getElementById('div2').offsetTop + " " + document.getElementById('div2-child').offsetTop;

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
#div1 {
  border: 1px solid #000;
  padding: 10px;
  position: relative;
}
#div2 {
  border: 1px solid #000;
  padding: 10px;
  margin-top: 5px;
  position: relative;
}
#div2-child {
  border: 1px solid #000;
  padding: 10px;
  margin-top: 5px;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, harum, officia quam magni provident tempora debitis mollitia placeat ducimus atque nobis fugit voluptatibus nisi commodi doloremque hic perspiciatis sint odit?
<div id="div1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, harum, officia quam magni provident tempora debitis mollitia placeat ducimus atque nobis fugit voluptatibus nisi commodi doloremque hic perspiciatis sint odit?</div>
<div id="div2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, harum, officia quam magni provident tempora debitis mollitia placeat ducimus atque nobis fugit voluptatibus nisi commodi doloremque hic perspiciatis sint odit?
  <div id="div2-child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, harum, officia quam magni provident tempora debitis mollitia placeat ducimus atque nobis fugit voluptatibus nisi commodi doloremque hic perspiciatis sint odit?</div>
</div>
<p id=demo></p>

It's a relative offset. It's inside `#div2` so yes. It's 71px from the top of the parent div. If you want the overall offset then just add it to the parent offset. — Reinstate Monica Cellio, Sep 26 '16 at 13:13
Actually in my `project` all divs are generates randomly and their Ids too, so I'm not able to use your approach @Archer — Abhishek Pandey, Sep 26 '16 at 13:17
Possible duplicate of [Retrieve the position (X,Y) of an HTML element](http://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element) — willlma, Sep 26 '16 at 13:19
Then you aren't explaining your actual problem properly. I suspect ^^ that comment is correct. — Reinstate Monica Cellio, Sep 26 '16 at 13:20

vikneshwar · Accepted Answer · 2016-09-26T14:04:49.363

As mentioned in MDN HTMLElement.offsetTop returns position relative to the parent element . So in your example document.getElementById('div2-child').offsetTop returns top position relative to div2

So, if you want the position relative to window(viewport) you need to add child position with it's parent position like below:

document.getElementById('demo').innerHTML = document.getElementById('div1').offsetTop + " " + document.getElementById('div2').offsetTop + " " + (document.getElementById('div2-child').offsetParent.offsetTop + document.getElementById('div2-child').offsetTop);

or you could use element.getBoundingClientRect() as below:

document.getElementById('demo').innerHTML = document.getElementById('div1').offsetTop + " " + document.getElementById('div2').offsetTop + " " + (document.getElementById('div2-child').getBoundingClientRect().top);

score 1 · Answer 2 · answered Sep 26 '16 at 13:28

/**
* Get the position of an element relative to the document body
*/
function absoluteOffset(el) {
  var offset = el.offsetTop
  var offsetParent = el.offsetParent
  if (offsetParent === document.body) {
    return offset
  }
  return offset + absoluteOffset(offsetParent)
}

var div1 = document.getElementById('div1')
var div2 = document.getElementById('div2')
var div2Child = document.getElementById('div2-child')
document.getElementById('demo').innerHTML = absoluteOffset(div1) + ' ' + absoluteOffset(div2) + ' ' + absoluteOffset(div2Child)

/**
* Get the position of an element relative to the document body
*/
function absoluteOffset(el) {
  var offset = el.offsetTop
  var offsetParent = el.offsetParent
  if (offsetParent === document.body) {
    return offset
  }
  return offset + absoluteOffset(offsetParent)
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
#div1 {
  border: 1px solid #000;
  padding: 10px;
  position: relative;
}
#div2 {
  border: 1px solid #000;
  padding: 10px;
  margin-top: 5px;
  position: relative;
}
#div2-child {
  border: 1px solid #000;
  padding: 10px;
  margin-top: 5px;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, harum, officia quam magni provident tempora debitis mollitia placeat ducimus atque nobis fugit voluptatibus nisi commodi doloremque hic perspiciatis sint odit?
<div id="div1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, harum, officia quam magni provident tempora debitis mollitia placeat ducimus atque nobis fugit voluptatibus nisi commodi doloremque hic perspiciatis sint odit?</div>
<div id="div2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, harum, officia quam magni provident tempora debitis mollitia placeat ducimus atque nobis fugit voluptatibus nisi commodi doloremque hic perspiciatis sint odit?
  <div id="div2-child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, harum, officia quam magni provident tempora debitis mollitia placeat ducimus atque nobis fugit voluptatibus nisi commodi doloremque hic perspiciatis sint odit?</div>
</div>
<p id=demo></p>

Thanks for response, but `element.getBoundingClientRect()` worked. — Abhishek Pandey, Sep 26 '16 at 13:46

Position relative div getting different offset

2 Answers2