why is this.offsetLeft 0?

I am working on a js player and the seek bar doesnt want to play nice. You can see two on pageload, they both work properly. Now click on either first or second div with the play img o开发者_开发知识库n it and a bar will appear. When you click there the bar is not precise. Its several pixels off.

this.offsetLeft is giving me 0 instead of 10 which breaks this. How do i fix it?

-edit- i still dont understand why but i decided to look again a min ago and deleted random css i pasted in. i deleted this single line and it worked. I am not sure what that block does but i know without that line it currently looks the same. player is not done yet so maybe i'll need this and revisit the question

position:relative;

---

The position:relative style is often used to make the element the "origin" for absolutely-positioned child elements. In other words, child elements with position:absolute calculate their positions from the relative parent's position. (instead of the window's) This way child elements follow the parent wherever it is placed.

Relative positioning also lets you use 'left', and 'top' to adjust the position of the element from its normally position.

The style can also be used to fix positioning and scrolling bugs in Internet Explorer.

---

It maybe too late for this issue but my experience can be useful here. I had the same problem, i was getting 0, when i called getOffsetLeft() method. you must add your widgets into container first and then call getOffsetLeft() method.