Detecting clicked horizontal position in a div

[nine]

When i click on streaming bar, position will be detected from left edge of the browser window but it has to be detected from left edge of the \[code\]#progressBar\[/code\] div in this demo. So, because of positioning \[code\]#progressBar\[/code\] div with \[code\]left: 200px;\[/code\] 200px is added on horizontal position that is clicked.My simple detecting function:\[code\]function point_it(e){ var x=e.clientX; var seekSecond = Math.floor((x/1100) * ytplayer.getDuration()); //1100 is width of the progress bar seekTo(seekSecond); document.getElementById("xPos").innerHTML=x; }\[/code\]style:\[code\] #progressBar{position: relative;top: 400px;left: 200px;width: 1100px;height: 4px;border: 2px solid gray;margin: 10px;z-index: 8;}#elapsedBar{position: relative;top: -1px;width:0px;height:3px;border:1px solid;border-color: #660033;background-color: #660033;margin:0px;z-index: 10;}#loadedBar{position: relative;top: 0px;width: 0px;height:4px;border:1px solid;border-color: gray;background-color: gray;margin:0px;z-index: 9;}\[/code\]