如何找到元素相对于其父元素的位置？或者说，如何找到蓝先生？

Question

我基本上有两个

元素。第一个是滚动容器，第二个是放置在容器中的元素。我想找到相对于滚动容器的y位置。我将所有内容都包装成了一个示例代码，标题为如何找到Mr. Blue？

<div style="height:100px; border:solid 1px black; overflow-y:scroll;">
    Please scroll down...
    <br/>
    <div style="height:400px;">
    </div>
    <br/>
    <div id="MrBlue" style="height:20px; background-color:blue; color:white">
        Mr. Blue
    </div>
</div>

所以，我希望有一个JavaScript / jQuery语句，它会提醒滚动容器相对于垂直位置的Mr. Blue. div。

附注：如果您想“玩弄”Mr. Blue，请查看http://jsfiddle.net/KeesCBakker/Qjr5q/。

- Kees C. Bakker

---

你能把Mr Blue带到jsfiddle上来，让我们一起和他玩吗？ - corroded

当然：http://jsfiddle.net/KeesCBakker/Qjr5q/ - Kees C. Bakker

Answer 1

如果您可以在包装/滚动容器中添加css position: relative，那么它就像简单的

document.getElementById('MrBlue').offsetTop

和jsfiddle示例：http://jsfiddle.net/eU3pN/2/

- Tom Tu

---

哦，它不是 JQuery 对吧 ;) $(#MrBlue).position.top() - 少写代码，多做事情 ;) - Dan Hanly

少写多做 - 的确如此 - 但需要更多的时间和CPU功率 - 有时你承受不起这个成本 - 特别是如果你要在旧PC/笔记本电脑或净书上测试使用大量jQuery的网站，你会意识到与本地JS相比，jQuery速度远远不及。它必须处理最佳和最坏情况，这使得它在任何可能的情况下都变慢。虽然它是我快速原型设计中最喜欢的工具，但如果我知道旧设备/浏览器的性能将从中受益，我总是尽可能多地使用本地代码。 - Tom Tu

我理解你的意思 - 我想JQuery源文件会将$(#MrBlue).position.top()翻译成document.getElementById('MrBlue').offsetTop或类似的内容。 - Dan Hanly

看起来.offsetTop表现不错。问题与滚动有关。查看示例并阅读Mr. Blue在滚动和不滚动时的情况：http://jsfiddle.net/KeesCBakker/Qjr5q/。你的答案可行，而jQuery返回不同的东西。 - Kees C. Bakker

啊，忘了补充一点，如果你想获取它在可滚动元素内的位置，你需要减去其父节点的scrollTop属性 - 请查看这个jsfiddle修复版http://jsfiddle.net/Qjr5q/12/。 - Tom Tu

Answer 2

您可以使用jQuery position。

$(document).ready(function() {
    alert($("#MrBlue").position().top);
});

请看这个 jsfiddle

更新: 容器必须有position:relative;，否则它不起作用

请看这个更新后的 jsfiddle

- felixsigl

---

这个不起作用。如果在外部 div 前添加一些换行符，你会得到不同的结果。 - Kees C. Bakker

完美...运行得非常完美。蓝先生非常感激您！您能把这个包含在您的答案中吗？（为了后代） - Kees C. Bakker

抱歉...但经过仔细考虑，答案应该是.offsetTop。问题与滚动有关。查看示例并阅读Mr. Blue在滚动和不滚动时的情况：http://jsfiddle.net/KeesCBakker/Qjr5q/ - Kees C. Bakker

Answer 3

Jquery的.position()

.position()方法允许我们检索元素相对于偏移父元素的当前位置。与.offset()相比，.offset()检索相对于文档的当前位置。当在同一包含DOM元素中将新元素定位在另一个元素附近时，.position()更有用。

返回一个包含top和left属性的对象。

http://jqapi.com/#p=position

- ipopa

---

你能否在 jsFiddle 上添加一些代码来展示你的答案是如何工作的：jsfiddle.net/KeesCBakker/Qjr5q - Kees C. Bakker

在这个例子中你缺少的是滚动容器需要设置为相对定位。 - Kees C. Bakker

我看到了。还没有深入探索过。 - ipopa