获取子元素相对于祖父母的偏移位置

Question

我很难弄清楚这一点。我有一个孩子、父母和祖父母元素。我想知道相对于祖父母的子偏移位置（位置：绝对），但是这是棘手的部分，父元素必须像手风琴一样处于相对位置，因此当折叠时，子元素也会折叠。我不能让父母没有相对位置，否则绝对孩子不会崩溃并留在原地。

我目前可以在 Jquery 中获取相对于父级的子级位置

// simple accordion
$('.accordion').on('click',function(){
  $(this).next().slideToggle();
})
// get child offset
var childPos = $('.child').position();
console.log(childPos.top) // top position from granparent

CSS

.grandparent{
  position:relative;
}
.parent{
  position: relative;
  padding:20px;
}
.child{
 position: absolute
}

超文本标记语言

<div class="grandparent">
  <div class="parent">
    <div class="accordion">accordion</div>
    <div class="child">
      child content
    </div>
  </div>
  <div class="parent">
    <div class="accordion">accordion</div>
    <div class="child">
      child content
    </div>
  </div>
  <div class="parent">
    <div class="accordion">accordion</div>
    <div class="child">
      child content
    </div>
  </div>
</div>

请帮忙！

Answer 1

如果我理解正确的话，你应该能够重复你的父母在祖父母中的地位的策略。

var childPos = $('.child').position();
console.log(childPos.top) // top position of child from parent
var parentPos = $('.parent').position();
console.log(parentPos.top) // top position of parent from grandparent
var childGrandparentPosTop = childPos.top + parentPos.top;
console.log(childGrandparentPosTop); // top position of child from grandparent