[英]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. 我有以下html,我得到每个div的topOffset
,但是position:relative
div下的子div正在获得意外的offset
,我无法删除position
,任何帮助/解决方案都很好。
I'm trying to set some js
behavior on some randomly generating div with offset
. 我正在尝试在一些具有offset
随机生成div上设置一些js
行为。
Note: I can only use javascript
not jq
. 注意:我只能使用javascript
而不是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>
As mentioned in MDN HTMLElement.offsetTop
returns position relative to the parent element . 如MDN中所述, HTMLElement.offsetTop
返回相对于父元素的位置。 So in your example document.getElementById('div2-child').offsetTop
returns top position relative to div2
因此,在您的示例document.getElementById('div2-child').offsetTop
返回相对于div2
顶部位置
So, if you want the position relative to window(viewport) you need to add child position with it's parent position like below: 因此,如果要相对于window(viewport)的位置,则需要添加带有其父位置的子位置,如下所示:
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: 或者您可以如下使用element.getBoundingClientRect() :
document.getElementById('demo').innerHTML = document.getElementById('div1').offsetTop + " " + document.getElementById('div2').offsetTop + " " + (document.getElementById('div2-child').getBoundingClientRect().top);
/**
* 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.