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 开发者_如何学Pythontitled 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/.

---

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/

---

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

---

Jquery's .position()

The .position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with .offset(), which retrieves the current position relative to the document. When positioning a new element near another one and within the same containing DOM element, .position() is the more useful.

Returns an object containing the properties top and left.

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