Javascript 如何找到'；相对'；元素相对于其父元素的位置？或者：如何找到蓝先生？

我基本上有两个div元素。第一个是滚动容器，第二个是放置在容器中的元素。我想找到相对于滚动容器的y位置。我将所有这些都打包成一段示例代码，题为“如何找到Blue先生？”

请向下滚动。。。




蓝先生

所以我想要一个JavaScript/jQuery语句，它可以提醒蓝先生的垂直位置。相对于滚动容器的div

另外，如果你想“摆弄”布鲁先生，请检查。

你可以使用

看到这个了吗

更新：容器必须具有

位置：相对否则它将无法工作

请参阅此更新的Jquery的.position（）

.position（）方法允许我们
检索一个对象的当前位置
相对于偏移父对象的元素。
将此与.offset（）进行对比，后者
检索当前位置
相对于文档。什么时候
将新元素放置在另一个元素附近
在同一个包含DOM的
元素，.position（）是
有用

返回一个包含
属性位于顶部和左侧

如果可以将css
position:relative
添加到包装/滚动容器中，则只需

document.getElementById('MrBlue').offsetTop

还有jsfiddle的例子
要不要把Blue先生带到jsfiddle，这样我们就可以和他一起聚会了？当然，这不管用。如果在外部div之前添加一些enter，则会得到不同的结果。完美。。。工作完美。蓝先生很感谢你！你能在你的回答中包括这一点吗（为了子孙后代）？对不起。。。但经过仔细考虑后，答案必须是.offsetop。这个问题与滚动有关。检查示例并在滚动和不滚动时阅读Blue先生：您可以向JSFIDLE添加一些代码来显示您的答案是如何工作的：jsFIDLE.net/Keescbaker/QJR5QT示例中缺少的是滚动容器需要是相对的。我明白了。还没有对它进行过太多的探索。哦，它不是JQuery，是吗；）$（#MrBlue）.position.top（）-少写，多做；）写得少，做得多-没错-但需要更多的时间和cpu能力-有时你负担不起-特别是如果你在旧的PC/笔记本电脑或上网本上测试你的jquery繁重的网站，你会意识到jquery在速度方面与本机JS相比并非遥不可及。它只需要处理最佳和最坏的情况，这使得它在任何可能的情况下都会变慢。尽管它是我最喜欢的快速原型制作工具，但如果我知道旧设置/浏览器的性能会从中受益，我总是尽量多地使用本机代码。我明白你的观点——我想JQuery源文件会将
$（#MrBlue）.position.top（）
转换为
document.getElementById（'MrBlue'）.offsetTop
或类似的东西看起来.offsetTop性能不错。这个问题与滚动有关。检查示例，并在滚动和不滚动时阅读Mr.Blue:。你的答案是有效的，jQuery返回了一个不同的东西。啊，忘了加上一条，如果你想得到它在可滚动元素中的位置，你需要减去它的parentNode的scrollTop属性-检查这个JSFIDLE修复
$(document).ready(function() {
    alert($("#MrBlue").position().top);
});

document.getElementById('MrBlue').offsetTop