如何在可滚动的div中获取对象的相对位置？

Question

I have a scrollable div, the one on the left in the above image.
In this div there exist many elements, lets focus on one of them (highlighted in grey) and call it A.

The right image is a representation of the div with the full size (without scroll or width setting) where A is placed without scrolling.

How may I find the value of X (in green), while having the left div currently on the page.
ie taking into consideration:

1. The div on page is already resized
2. The div on page is scrollable (and has been scrolled)
3. I want x not y !

ie How to get the relative y coordinate of an element inside a scrollable div ? in simple words: how to calculate x via javascript ?

Answer 1

Try this :

var elementTop = document.getElementById('yourElementId').offsetTop;
var divTop = document.getElementById('yourDivId').offsetTop;
var elementRelativeTop = elementTop - divTop;

Answer 2

You need to specify the parent's div position property to be relative and then use the position() method (if you are using jquery).

Check this: http://jsfiddle.net/V9rGG/

Try to remove the position: relative and see what happens.