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

Question

我有一个棘手的问题，我正拼命试图找到一个可行的解决方案。

article#post和aside#sidebar左右并排浮动-非常简单。 在我的article#post内部有一个h1和一个div.post-entry 。

我想知道是否可以确定div.post-entry与外部容器section#content的相对偏移section#content 。 我要这样做的原因是，我可以将浮动的侧边栏margin-top留在与“ div.post-entry”相同的高度上。

这是我当前的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;