位置元素相对于JS中的parent.parent容器？没有绝对/固定的定位？

Question

我有一个棘手的问题，我拼命想找到一个工作解决方案。

A article#post和aside#sidebar是左侧并排 - 很简单。 在我的article#post里面是h1和div.post-entry。

我想知道我是否能以某种方式确定div.post-entry与外部容器section#content的相对偏移量。我想这样做的原因是，我可以在浮动边栏上放置与'div.post-entry`相同高度的margin-top。

这里是我当前的HTML结构模型：

<section id="content"> 

    <article id="post"> 
     <h1>Title of the post</h1> 
     <div class="post-entry"> 
      <p>Something</p> 
     </div> 
    </article> 

    <aside id="sidebar> 
     Something 
    </aside> 

</section> 

如此反复，我想找到任何解决方案，使内部从顶部div.post-entry多远定位在像素值section#content。

我遇到的主要问题是，我甚至看不到post-entry.offsetTop的工作。这应该得到div.post-entry相对于article.post的偏移量，因为这是它的父亲。这实际上也适用于我。

var articleOffset = $('.post-entry').offsetTop; 
console.log($('.post-entry')); //found and exists 
console.log(articleOffset); undefined 

任何想法为什么这不适合我吗？为什么我在这里的offsetTop值未定义。有一个大的<h1>，填充至少“30px”，抵消div.post-entry。

关于这件事的任何想法？ 也许任何其他很酷的解决方案如何做到这一点？我只想让aside#sidebar的起始高度与div.post-entry相同，但我不想更改标记。

Answer 1

您需要从jQuery对象中选择DOM元素。

var articleOffset = $('.post-content')[0].offsetTop;