Question

我有以下html，我得到每个div的topOffset，但position:relative div下的子div正在意外offset，我无法删除position ，任何帮助/解决方案都会很棒。

我正在尝试使用js在一些随机生成的div上设置一些offset行为。

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

的顶部位置

因此，如果您想要相对于窗口（视口）的位置，您需要添加子位置及其父位置，如下所示：

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>

位置相对div获得不同的偏移量

2 个答案: