如何找到元素与其父元素的"相对"位置？或者:如何找到蓝先生？

Question

我基本上有2个div元素.第一个是滚动容器,第二个是放置在容器中的元素.我想找到相对于滚动容器的y位置.我将所有内容都包含在一个标题为" 如何找到蓝先生 "的示例代码中？

<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的声明,提醒在垂直位置的的蓝先生.div 相对于滚动容器.

PS.如果你想与先生"小提琴".蓝色,请查看http://jsfiddle.net/KeesCBakker/Qjr5q/.

Answer 1

如果你可以将css添加position: relative到包装/滚动容器中,那就简单了

document.getElementById('MrBlue').offsetTop

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