Abhishek Pandey Abhishek Pandey - 2 months ago 9
CSS Question

Position relative div getting different offset

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>




Answer

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);