相對div位置的偏移量不同

Question

我有以下html，我得到每個div的topOffset ，但是position:relative div下的子div正在獲得意外的offset ，我無法刪除position ，任何幫助/解決方案都很好。

我正在嘗試在一些具有offset隨機生成div上設置一些js行為。

注意：我只能使用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> 

Answer 1

如MDN中所述， HTMLElement.offsetTop返回相對於父元素的位置。 因此，在您的示例document.getElementById('div2-child').offsetTop返回相對於div2頂部位置

因此，如果要相對於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);

或者您可以如下使用element.getBoundingClientRect（） ：

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

Answer 2

/**
* 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>