Q:

How to find the 'relative' position of an element to its parent element? Or: How to find Mr. Blue?

I have basically 2 div elements. The first is a scrolling container and the second one is an element that is placed in the container. I would like to find the y-position relative to the scrolling container. I wrapped all of it into a piece of example-code titled How to find 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>

So I would like a JavaScript / jQuery statement that alerts the vertical-position of the Mr. Blue. div relative to the scrolling container.
Ps. If you would like to 'fiddle' with mr. Blue, check http://jsfiddle.net/KeesCBakker/Qjr5q/.

A:

If you can add css position: relative to the wrapping/scrolling container then it's as simple as 
document.getElementById('MrBlue').offsetTop

and jsfiddle example http://jsfiddle.net/eU3pN/2/

A:

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

see this jsfiddle
Update: Container must have position:relative; otherwise it wont work
see this updated jsfiddle

